# SunburstChart

> Radial partition: the open node in the center, its descendants in rings, each slice proportional to value.

Source: https://ui.jcsoftdev.com/docs/components/sunburst-chart

Radial partition: the open node in the center, its descendants in rings,
each slice proportional to value. Clicking a segment zooms into it with an
animated transition; the center or Escape zooms back out.

## Import

```ts
import { SunburstChart } from "@jcsoftdev/ui/charts";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/charts/sunburst-chart`.

## Usage

```tsx
<SunburstChart
  title="Servicios por sede, barbero y servicio"
  data={servicesByBranch}
  valueFormat="integer"
  height={380}
  half={false}
  levels={3}
  drillDown
  breadcrumb
  legend
  tooltip
  centerLabel
  segmentLabels
  gap={1.5}
  sort
  animate
  loading={false}
  labels={spanishLabels}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` * | `string` |  | Accessible name of the drawing and caption of the data table. |
| `data` * | `HierarchyDatum` |  | Root of the tree; its name and total sit in the center. |
| `height` | `number \| "fill"` | `360` | Height of the drawing; the disc takes the smaller of width and height. |
| `aspectRatio` | `number` |  | Width / height ratio; sizes the drawing from the container width when `height` is not "fill". |
| `valueFormat` | `ValueFormat` |  |  |
| `half` | `boolean` | `false` | Half disc opening upwards (a 180 degree fan) instead of a full circle. |
| `levels` | `number` | `3` | Rings shown around the open node. |
| `drillDown` | `boolean` | `true` | Click a segment to zoom into it, the center to zoom out. |
| `breadcrumb` | `boolean` | `true` |  |
| `legend` | `boolean` | `true` | Read-only legend of the open level's branches. |
| `tooltip` | `boolean` | `true` |  |
| `centerLabel` | `boolean` | `true` | Name and total of the open node in the center. |
| `segmentLabels` | `boolean` | `true` | Labels along the segments where they fit. |
| `gap` | `number` | `1.5` | Gap between segments in pixels (measured at the inner ring). |
| `sort` | `boolean` | `true` |  |
| `animate` | `boolean` | `true` |  |
| `loading` | `boolean` |  |  |
| `labels` | `Partial<HierarchyLabels>` |  |  |
| `onFocusChange` | `((node: HierarchyNode) => void)` |  |  |
| `onNodeClick` | `((node: HierarchyNode) => void)` |  | Click on a segment that cannot be opened (a leaf). |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/charts-sunburstchart--default)
- [Two Levels](/storybook/?path=/story/charts-sunburstchart--two-levels)
- [Without Labels](/storybook/?path=/story/charts-sunburstchart--without-labels)
- [Static View](/storybook/?path=/story/charts-sunburstchart--static-view)
- [Drilldown](/storybook/?path=/story/charts-sunburstchart--drilldown)
- [Semi Circle](/storybook/?path=/story/charts-sunburstchart--semi-circle)
- [Semi Circle Narrow](/storybook/?path=/story/charts-sunburstchart--semi-circle-narrow)
- [Loading](/storybook/?path=/story/charts-sunburstchart--loading)
- [Empty](/storybook/?path=/story/charts-sunburstchart--empty)
- [Narrow](/storybook/?path=/story/charts-sunburstchart--narrow)

## Source

`packages/ui/src/charts/sunburst-chart/sunburst-chart.tsx`