Sunburst Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { buildArcs, SunburstBreadcrumb, SunburstCenter, SunburstChart, SunburstHint, SunburstLabels, SunburstSegment } from "@bklitui/ui/charts"
4import { buildArcs, SunburstBreadcrumb, SunburstCenter, SunburstChart, SunburstHint, SunburstLabels, SunburstSegment } from "@/components/charts"
5 
6const data = {
7  name: "Revenue",
8  children: [
9    {
10      name: "Product",
11      children: [
12        { name: "Enterprise", value: 198 },
13        { name: "Pro", value: 145 },
14        { name: "Starter", value: 95 },
15      ],
16    },
17    {
18      name: "Services",
19      children: [
20        { name: "Consulting", value: 160 },
21        { name: "Support", value: 90 },
22        { name: "Training", value: 55 },
23      ],
24    },
25    {
26      name: "Partners",
27      children: [
28        { name: "Referrals", value: 120 },
29        { name: "Affiliates", value: 75 },
30      ],
31    },
32  ],
33};
34 
35const { arcs } = buildArcs(data);
36 
37export default function Component() {
38  return (
39    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
40      <div className="w-full max-w-3xl">
41        <SunburstChart data={data} size={360}>
42  {arcs.map((arc) => (
43    <SunburstSegment index={arc.arcIndex} key={arc.id} />
44  ))}
45  <SunburstCenter />
46  <SunburstLabels />
47  <SunburstHint />
48</SunburstChart>
49      </div>
50    </main>
51  )
52}