# Donut chart

> Proportions as arcs that morph when the data changes.

Component · Pro · https://lodeui.com/components/donut-chart

## 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

```bash
npx shadcn@latest add @lode/donut-chart
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 from: Animated 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.

## Related

- [Bar chart](https://lodeui.com/components/bar-chart) — Bars that grow in and morph between datasets, with a hover readout.
- [Animated number](https://lodeui.com/components/animated-number) — A number that springs to its new value instead of jumping.
- [Area chart](https://lodeui.com/components/area-chart) — A smooth trend line with a comparison period and an inspectable crosshair.