Data viz
Pie & donut
For composition — how a whole splits into parts. Same scaffolding and theme as the chart family: the shared series palette, surface segment dividers, a dark tooltip, and a linked legend that highlights as you hover. The donut keeps a running total in its center.
npx shadcn@latest add @orbit/pie-chartOverview
Hover a segment or a legend row — the two stay linked.
Variants
The donut frees its center for a headline total; the solid pie maximizes the slice area. A single variant prop switches between them.
Legend
With showLegend on, a value + percentage table sits beside the chart. Hovering either the legend row or a segment dims the rest, so the two stay linked.
In context
A breakdown card — the donut paired with the headline it explains.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "donut" | "pie" | "donut" | Donut keeps a 62% hole with the center total; pie renders solid slices. |
| data | { name: string; value: number; color?: string }[] | — | Slices. Colors default to the fixed CHART_SERIES palette by position — fold a long tail into “Other”. |
| height | number | 300 | Total height in px. Width is responsive. |
| showLegend | boolean | true | Value + percentage table beside the chart, hover-linked to the segments. |
| centerLabel | string | — | Caption under the center total (donut only). |
| centerValue | ReactNode | — | Overrides the headline number in the donut center. Defaults to the sum of the data. |
| formatValue | (v: number) => string | String | Formats the tooltip, legend, and center values. |
| ariaLabel | string | — | Plain-language summary for the chart's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
Pies answer one question — “what share?” — and only when there are a few parts. Reach for bars when precision or ranking matters.
Keep it to a few slices
Five or six segments at most — past that, the small wedges blur together. Group the tail into “Other”.
Compare two pies precisely
Eyes can’t judge angle differences well — use bars when exact comparison matters.
Use the donut for a KPI
The hole is prime real estate for the total or a headline percentage.
Explode or 3D the slices
Tilts and gaps distort the very areas the chart exists to compare. Keep it flat.
Keyboard & accessibility
The chart renders as a labelled image with its data available on demand; identity never rides on color alone.