Donut Chart
ChartsA pie chart with a hollow center and total.
Donut charts keep the proportion story of a pie while freeing the center for a headline metric. The total is computed automatically and a per-slice legend sits beside the ring.
npx shadcn@latest add donut-chartDefault
Spend breakdown with a centered total and side legend.
Preview
Live100Total
- Product48
- Marketing22
- Infra15
- Support15
tsx
1<DonutChart data={spendBreakdown} height={240} />
Custom
A thicker ring in a taller container.
Preview
Live100Total
- Organic42
- Direct26
- Referral18
- Social14
tsx
1<DonutChart data={trafficSources} height={280} innerRadius="70%" outerRadius="92%" />
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| data | { name, value, color? }[] | The slices to render. |
| height | number= 240 | The chart height in pixels. |
| innerRadius | number | string= "62%" | The inner radius of the ring. |
| outerRadius | number | string= "86%" | The outer radius of the ring. |