KQ-197 · DONUT/BREAKDOWN
Donut Breakdown
A donut whose segments draw themselves in around the ring in turn. Hovering a slice — or focusing its legend entry — pops it outward and swaps the centre readout to that slice's share; the legend carries the full data for assistive tech.
KQ-197 · DONUT/BREAKDOWN
10,540
Sessions
Hover a slice
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/donut-breakdown
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| segments | DonutSegment[] | — | Slices — id, label, value, optional color. |
| format | (value) => string | — | Formats the centre and legend readouts. |
| totalLabel | string | — | Heading for the default centre readout. |