Donut Chart
.mdDonut whose arcs sweep in on springs; hovering a segment or legend row expands it and swaps the rolling centre total for that segment's share.
chartdonutpiesharebreakdownsvg
Installation
$npx shadcn@latest add @geturui/donut-chart
Also installs: Odometer Number
Usage
usage.tsx
1import { DonutChart } from "@/components/charts/donut-chart";
2
3<DonutChart
4 title="Revenue by plan"
5 prefix="$"
6 data={[
7 { label: "Pro", value: 21480 },
8 { label: "Lifetime", value: 8740 },
9 { label: "Team", value: 3610 },
10 ]}
11/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { label: string; value: number; color?: string }[] | — | Segments in drawing order (clockwise from 12). |
size | number | 220 | Diameter in px. |
thickness | number | 26 | Ring thickness in px. |
totalLabel | string | "Total" | Caption under the centre total. |
prefix / suffix | string | — | Added around values, e.g. $. |
valueFormatter | (n: number) => string | — | Overrides value formatting. |
title | string | — | Caption and accessible name. |
Accessibility
- The SVG is an image labelled with every segment's share.
- Legend rows are toggle buttons (aria-pressed); focusing one highlights its segment and the centre text updates politely.
- Values and percentages are always shown in text beside the colour swatch.