Sunburst Chart

Usage

import { SunburstChart, SunburstSegment, SunburstCenter, SunburstLabels, buildArcs } from "@cronus-ui/ui/charts";

const { arcs } = buildArcs(tree);

<SunburstChart data={tree} size={360}>
  {arcs.map((arc) => <SunburstSegment index={arc.arcIndex} key={arc.id} />)}
  <SunburstCenter />
  <SunburstLabels />
</SunburstChart>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

Drill-down

Click a segment to focus that node. SunburstCenter zooms out. Drive focusId yourself, or use SunburstBreadcrumb with useSunburstBreadcrumbItems().

const { items, zoomTo } = useSunburstBreadcrumbItems();

<SunburstBreadcrumb>
  {items.map((item) => (
    <button key={item.id} type="button" onClick={() => zoomTo(item.id)}>
      {item.label}
    </button>
  ))}
</SunburstBreadcrumb>

Data format

Leaves need `value`. Parents can omit it — the layout sums children.

type SunburstNode = {
  name: string;
  value?: number;
  color?: string;
  fill?: string;
  children?: SunburstNode[];
};

const tree: SunburstNode = {
  name: "All",
  children: [
    { name: "Product", children: [{ name: "App", value: 28 }, { name: "API", value: 20 }] },
    { name: "Services", value: 18 },
  ],
};

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`. defaultSunburstColors cycles `--chart-1`…`--chart-5`. Nested rings fade with depth.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bun add recharts

bun add motion