Gapped arc segments that sweep in, a centered total, a percentage legend and hover that expands a segment.
npx shadcn@latest add https://hyperblur.dev/r/donut-chart.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/donut-chart.tsx.
import { DonutChart } from "@/components/hyperblur/donut-chart"
<DonutChart data={[{ label: "Direct", value: 4200 }, { label: "Organic", value: 3100, color: "#22c55e" }, { label: "Referral", value: 1600 }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; color?: string }[] | required | Segments. Colors fall back to a built-in palette. |
| size | number | 180 | Diameter of the ring in pixels. |
| thickness | number | 22 | Ring thickness in pixels. |
| centerLabel | string | Text for the center. Defaults to the formatted total with a Total caption. | |
| showLegend | boolean | true | Show the legend with percentages beside the ring. |
| locale | string | "en-US" | Locale for number and percent formatting. |
| animate | boolean | true | Sweep the segments in on mount. |