Donut chartPro
Proportions as arcs that morph when the data changes.
Visits by source
Aug 23 – Sep 21, 2026
Visits40,610
- Search16,84041%
- Direct8,12020%
- Newsletter5,26013%
- Referrals6,43016%
- Social2,9107%
- OtherPodcasts and partners1,0503%
When to use
- Up to six parts of a whole, like traffic sources or plan mix.
When not to use
- Comparing many similar values: use a bar chart.
- Change over time: use an area or line chart.
Installation
Usage
Import it from @/components/ui/donut-chart after installing.
example.tsx
import { DonutChart } from "@/components/ui/donut-chart";
export function Sources() {
return (
<DonutChart
centerLabel="Visits"
data={[
{ label: "Search", value: 16840, color: "var(--chart-1)" },
{ label: "Direct", value: 8120, color: "var(--chart-2)" },
{ label: "Referrals", value: 6430, color: "var(--chart-4)" },
]}
/>
);
}Built fromAnimated number
API reference
DonutChart
Proportional arcs with a total in the middle. Hover a segment to see its own value.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { label: string; value: number; color: string }[] | – | Segments in drawing order, clockwise from 12 o'clock. |
| size / thickness | number | 240 / 30 | Max diameter and ring width in px. Shrinks to fit narrower containers. |
| gap | number | 2.5 | Gap between segments in degrees. |
| centerLabel / format | string / (n) => string | "Total" | Center caption and number format. |
| activeIndex / onActiveIndexChange | number | null | – | Control the highlight, e.g. from a legend list. |
Accessibility
- The SVG has role="img" labelled with the total.
- Always pair it with a legend that lists exact values; color is not enough on its own.
Motion
- Arcs sweep in from 12 o'clock, then interpolate start and end angles when data changes (800ms).
- Hover thickens a segment and dims the others.
Responsive behavior
- Square, fills its container up to size.
Performance
- Arc paths are computed per frame only during the 800ms transition.
Notes for AI
- Use var(--chart-1) to var(--chart-6) so colors follow the theme.
- Keep labels unique; they're used as keys.
This page as Markdown, for assistants and coding agents:
/components/donut-chart/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt