Rings of arcs that show how a whole splits into parts and sub-parts. Use it for data with levels, such as a category and its products.
It is plain svg, so it does not need any extra package.
A leaf has a value. A group takes the sum of its children. Hover an arc to read it.
withLabels writes the name of every arc that is big enough. A bigger size leaves room for more.
0 is the top and angles grow clockwise, so -90 to 90 draws the upper half.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| data | the top level items, each one may have children | SunburstNode[] | SunburstNode | - |
| size | width and height, in pixels | number | - | 300 |
| innerRadius | radius of the hole in the center, in pixels | number | - | 36 |
| gap | space between arcs and rings, in pixels | number | - | 1 |
| startAngle | where the first arc starts, in degrees, 0 is the top | number | - | 0 |
| endAngle | where the last arc ends, in degrees | number | - | 360 |
| withLabels | write the name inside the arcs that are big enough | boolean | - | false |
| valueFormatter | how a number is written | (value: number) => string | - | thousands separators, en-US |
| ... | native props, passed to the svg | SVGAttributes | 'aria-label', 'className', ... | - |
type SunburstNode = {
name: string
value?: number // a leaf needs a value, a group is the sum of its children
color?: string // any CSS color, children take their parent's, a little lighter
children?: SunburstNode[]
}
The ref points at the svg.
Each arc has a hover title with its name and value. Describe the chart with aria-label or aria-labelledby. With a name it is an image, without one it is hidden from assistive technology.
Write the biggest parts in text next to the chart, or offer the same data in a Table.