SunburstChart
Display hierarchical values as concentric rings sized by leaf values.
Component behavior
SunburstChart displays a hierarchy as concentric rings. Each ring represents a level and each arc angle represents its share of the parent.
Use cases
- Two or three hierarchy levels displayed together.
- Nested breakdowns: org by team, storage by folder, cost by account then service.
- Hierarchy levels should be displayed as concentric rings.
Props
Pass the top-level nodes; each may carry children. Leaf values drive the angles and parents sum their leaves, so you only supply numbers at the bottom. Top-level nodes take a palette color and descendants inherit a lightened tint per level.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | SunburstNode[] | — | Top-level rings. Each node has a label, an optional color, and either a leaf value or children. Parents sum their descendants. |
size | number | 240 | Diameter of the wheel in pixels. |
formatValue | (value: number) => string | — | Formats the value shown in the center readout. |
Examples
Headcount by division
import { SunburstChart } from "@solarius/onset";
import type { SunburstNode } from "@solarius/onset";