# Sunburst

> A hierarchy in rings: click a slice to make it the centre, and every arc swings around it.

Component · Pro · https://lodeui.com/components/sunburst

## When to use

- Showing where a total comes from, one level at a time: spend by team, revenue by region and product.
- Comparing a part with its parent and with the whole in one view.

## When not to use

- Flat categories: use a donut or bar chart.
- Exact comparisons between many small slices: use a sorted bar chart or treemap.

## Installation

```bash
npx shadcn@latest add @lode/sunburst
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { Sunburst } from "@/components/ui/sunburst";

const data = {
  label: "All teams",
  children: [
    { label: "Platform", children: [{ label: "Compute", value: 25600 }, { label: "Storage", value: 11600 }] },
    { label: "Data", children: [{ label: "Warehouse", value: 23700 }, { label: "Pipelines", value: 17900 }] },
  ],
};

export function Spend() {
  return <Sunburst data={data} format={(n) => `$${(n / 1000).toFixed(1)}K`} />;
}
```

## API reference

### Sunburst

Rings of a hierarchy around a centre. Clicking a slice makes it the centre.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| data | `SunburstNode` | – | { label, value?, color?, children? }. Parents sum their children. |
| rings | `number` | `3` | Rings shown around the centre. |
| size | `number` | `340` | Diameter in px; shrinks to fit. |
| format | `(n) => string` | – | Values in the centre and legend. |
| legend | `boolean` | `true` | List of the current level beside the chart. |
| onFocusChange | `(path: string[]) => void` | – | Called when the centre changes. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through the legend and breadcrumbs |
| Enter / Space | Drill into the focused group, or go back from the centre |
| Escape | Go up one level |

## Accessibility

- Every group in the legend is a button with its value and share.
- The chart has a text summary; the breadcrumb marks the current level.

## Motion

- Drilling swings every arc around the new centre on a spring.
- Respects reduced motion: changes jump instead.

## Responsive behavior

- The rings scale to the container; the legend wraps below on narrow screens.

## Performance

- One path per visible slice; nothing animates when idle.

## Notes for AI

- Give leaves a value; parents are summed.
- Top-level groups take colours from the chart palette unless you set color; deeper rings are tints of their group.

## Related

- [Treemap](https://lodeui.com/components/treemap) — Squarified rectangles sized by value, for revenue mix, storage and market caps.
- [Donut chart](https://lodeui.com/components/donut-chart) — Proportions as arcs that morph when the data changes.
- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.