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
- segments
- DonutSegment[]
- default —
- Slices — id, label, value, optional color.
- format
- (value) => string
- default —
- Formats the centre and legend readouts.
- totalLabel
- string
- default —
- Heading for the default centre readout.
| 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. |