Donut Chart
SVG donut chart with focusable segments, legend, and a center label that updates on hover or focus.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
DonutChartProps
Also accepts all props of Omit<React.ComponentProps<"div">, "children">
| Prop | Type | Default | Description |
|---|---|---|---|
| data* required | DonutDatum[] | — | — |
| totalLabel | string | "Total" | Label shown under the total in the centre |
| title | string | "Donut chart" | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/donut-chart.json