# Donut

Ring chart whose segments sweep in one after another around a counting total, with a legend beside it (below in portrait and square).

```bash
npx shadcn add https://www.reelcn.dev/r/donut.json
```

Usage:

```tsx
<Center>
  <Donut
    label="Visits"
    data={[
      { label: "Search", value: 4200 },
      { label: "Direct", value: 2600 },
      { label: "Social", value: 1500 },
      { label: "Email", value: 700 },
    ]}
  />
</Center>
```

Use for:

- Share of a whole: traffic sources, budget split, time spent across a few groups
- Two to six segments

Avoid:

- A single percentage. Use `progress-ring`
- Many small categories. Use `bar-chart`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| delay? | `number` | — | Frames to wait before entering. |
| duration? | `number` | — | Enter duration in frames. Defaults to 0.6s. Some items reuse `duration` for an unrelated local timing. See that item's own prop docs. |
| exit? | `number \| boolean` | — | Exit at the end of the parent `<Sequence>`. `false` keeps it on screen, a number sets the exit length in frames. |
| motion? | `MotionPersonality` | — | Override the theme's motion personality. |
| poster? | `boolean` | — | Renders fully entered, with no exit: for a still frame or thumbnail. Defaults to `false`. |
| holdFrames? | `number` | — | Delays the start of the exit window by this many frames, for a minimum on-screen hold. Defaults to `0`. |
| data | `DonutDatum[]` | — |  |
| label? | `string` | — | Caption under the center number. |
| total? | `number` | — | Center number. Defaults to the sum of `data`. |
| size? | `number` | — | Diameter in design units. Defaults by orientation. |
| thickness? | `number` | `0.26` | Ring thickness as a fraction of the radius. |
| gap? | `number` | `6` | Gap between segments in design units. |
| drawFrames? | `number` | — | Frames the full sweep takes. Defaults to 1.2s. |
| legendValue? | `"value" \| "none" \| "percent"` | `"percent"` | What each legend row shows after its label. |
| showLegend? | `boolean` | `true` |  |
| locale? | `string` | `"en-US"` | BCP 47 locale for numbers. |
| format? | `NumberFormatOptions` | — | `Intl.NumberFormat` options for the center total and legend values. |
| colors? | `string[]` | — | Segment colors in order. Defaults to the theme palette, accent first. |
| trackColor? | `string` | — | Empty ring behind the segments. Defaults to the theme border. |
| color? | `string` | — | Center number and legend labels. Defaults to the theme foreground. |
| labelColor? | `string` | — | Caption and legend values. Defaults to the theme muted color. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |