SunburstPro
A hierarchy in rings: click a segment and every arc swings around it as the new centre, with a breadcrumb back and a rolling total.
Live · keyboard ready
Cloud spend
All teams, $188.2K
| Path | Value | Share of parent |
|---|---|---|
| Platform | $49.8K | 26.5% |
| Platform / Compute | $31.4K | 63% |
| Platform / Compute / api-cluster | $18.9K | 60.3% |
| Platform / Compute / batch-workers | $8.2K | 26% |
| Platform / Compute / edge-cache | $4.3K | 13.7% |
| Platform / Storage | $8.7K | 17.4% |
| Platform / Storage / object-store | $6.5K | 74.7% |
| Platform / Storage / backups | $2.2K | 25.3% |
| Platform / Network | $9.8K | 19.6% |
| Platform / Network / load-balancers | $3.3K | 34.2% |
| Platform / Network / egress | $6.4K | 65.8% |
| Data | $50.1K | 26.6% |
| Data / Warehouse | $31.0K | 61.9% |
| Data / Warehouse / analytics-wh | $23.9K | 77% |
| Data / Warehouse / etl-jobs | $7.1K | 23% |
| Data / Streaming | $9.9K | 19.8% |
| Data / Streaming / event-bus | $6.9K | 69.3% |
| Data / Streaming / connectors | $3.0K | 30.7% |
| Data / Lake | $9.1K | 18.2% |
| Data / Lake / raw-zone | $5.4K | 58.9% |
| Data / Lake / curated-zone | $3.8K | 41.1% |
| ML | $61.8K | 32.8% |
| ML / Training | $45.8K | 74.1% |
| ML / Training / gpu-train | $38.9K | 85% |
| ML / Training / experiments | $6.9K | 15% |
| ML / Inference | $16.0K | 25.9% |
| ML / Inference / model-serving | $12.1K | 75.2% |
| ML / Inference / embeddings | $4.0K | 24.8% |
| Product | $17.6K | 9.4% |
| Product / Web | $7.4K | 42.3% |
| Product / Web / web-app | $6.3K | 84.1% |
| Product / Web / previews | $1.2K | 15.9% |
| Product / Mobile | $5.3K | 29.9% |
| Product / Mobile / push-service | $1.3K | 23.9% |
| Product / Mobile / api-gateway | $4.0K | 76.1% |
| Product / Search | $4.9K | 27.8% |
| Product / Search / search-index | $4.9K | 100% |
| Security | $8.9K | 4.7% |
| Security / Logging | $6.8K | 75.8% |
| Security / Logging / siem-logs | $5.6K | 83.1% |
| Security / Logging / audit | $1.1K | 16.9% |
| Security / Scanning | $2.1K | 24.2% |
| Security / Scanning / code-scan | $1.7K | 80% |
| Security / Scanning / secrets | $430 | 20% |
- Drilling into where a total comes from, one level at a time.
- Showing the share of each part within its parent and within the whole.
- Dashboards where a compact, explorable overview beats a long table.
- Use donut-chart for a single level of parts.
- Use tree-table when people need to compare exact values across many rows.
- Avoid it for more than about 150 leaves; thin slivers stop being readable.
Installation
Pro source and install commands unlock with a Pro plan.
example.tsx
import { Sunburst } from "@/registry/components/sunburst/sunburst"; const spend = { id: "all", label: "All teams", children: [ { id: "platform", label: "Platform", children: [ { id: "platform/compute", label: "Compute", children: [{ id: "api", label: "api-cluster", value: 18910 }, { id: "batch", label: "batch-workers", value: 8160 }] }, { id: "platform/storage", label: "Storage", value: 8670 }, ] }, { id: "data", label: "Data", children: [{ id: "data/warehouse", label: "Warehouse", value: 31020 }] }, ],}; export function CloudSpend() { return <Sunburst data={spend} label="Cloud spend, September" formatValue={value => `$${(value / 1000).toFixed(1)}K`} />;}Sunburst
A hierarchy drawn as rings. Clicking a segment swings every arc around it as the new centre, the breadcrumb follows, and the centre label rolls to the new total.
PropTypeDefaultDescription
dataRequiredSunburstNode–The root: { id, label, value?, children? }. A branch's value is the sum of its children.labelRequiredstring–Names the chart for assistive technology.formatValue(value: number) => string–Formats the centre value, legend, tooltip, and table.depthnumber3Rings shown around the centre at once. Fewer levels below a zoomed node fill the full radius.sizenumber340Largest diameter in pixels. The chart scales down to fit its container.focusstring–Controlled id of the node in the centre.defaultFocusstring–Initial centre when uncontrolled. Defaults to the root.onFocusChange(id: string) => void–Called when a segment, breadcrumb, legend row, or the centre zooms.legendbooleantrueLists the children of the centre with values and shares, synced with the arcs.emptyLabelstring"No data yet"Shown in the centre when the total is zero.classNamestring–Extra class on the figure.- Tab
- Focuses the chart and highlights the first segment.
- ArrowLeftorArrowRight
- Moves between sibling segments.
- ArrowDownorArrowUp
- Moves to the first child or back to the parent segment.
- EnterorSpace
- Zooms into the highlighted segment.
- EscapeorBackspace
- Zooms out one level.
- The chart is a focusable group; the highlighted segment is announced with its path, value, and share of its parent.
- The breadcrumb is a nav landmark with the current level marked aria-current.
- Legend rows are buttons that name the segment, its value and share, and whether it zooms in.
- A visually hidden table lists every node's full path, value, and share of its parent.
- Zooming interpolates every arc's angles and ring from where it is on screen to its place around the new centre, on one spring.
- Rings re-share the radius as levels appear or run out, so a shallow branch fills the chart as it zooms.
- The centre value rolls digit by digit; labels rise in from a soft blur; the breadcrumb slides and reflows.
- Reduced motion jumps arcs to their final place and swaps text with a short fade.
- The ring scales to its container; the legend sits beside it when there is room and below it on narrow screens.
- Arc labels follow the ring's curve and appear only where the arc can hold them.
- Touch taps zoom; the centre is a large target to zoom back out.
- Partitioning runs once per data change; arcs are painted by writing path attributes, not by re-rendering React each frame.
- Label fit is measured per arc during paint; keep the tree under a few hundred nodes.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Choose it for exploring a two to four level hierarchy by share: spend, storage, headcount, time.
- Give every node a stable, unique id so switching datasets morphs the arcs.
- Keep top level branches to about eight; each takes the next series hue derived from the accent and its children step lighter; past four they fall back to ink.
- Control focus when a URL or another view should drive the zoom.
The full library index for assistants is at /llms.txt.