Ring Chart Example

1"use client"
2 
3// In your app (monorepo/npm): import { RingChart, Ring, RingCenter } from "@bklitui/ui/charts"
4import { RingChart, Ring, RingCenter } from "@/components/charts"
5 
6const ringData = [
7  { label: "Email", value: 42 },
8  { label: "Social", value: 28 },
9  { label: "Direct", value: 18 },
10  { label: "Other", value: 12 },
11];
12 
13export default function Component() {
14  return (
15    <main className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
16      <div className="w-full max-w-3xl">
17        <RingChart data={ringData} size={280} strokeWidth={14}>
18  {ringData.map((item, i) => (
19    <Ring index={i} key={item.label} />
20  ))}
21  <RingCenter defaultLabel="Channels" />
22</RingChart>
23      </div>
24    </main>
25  )
26}