SunburstPro

• 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.

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

Import it from @/components/ui/sunburst after installing.

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`} />;
}

• 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.

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

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

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

• 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.