# Donut Chart

Donut or half-donut chart whose slices sweep in clockwise. Tap or drag around the ring to pull a slice out and show its name, value and share in the centre, with an optional legend.

> Composed · Pro · Data Display — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/donut-chart
```

## Import

```tsx
import { donutPalette, DonutChart, DonutLegend } from "@/components/ui/donut-chart/donut-chart";
```

## Variants

- `allocation` — Portfolio allocation: `npx @lumioui/cli add pro/donut-chart-allocation`
- `macros` — Daily macros: `npx @lumioui/cli add pro/donut-chart-macros`
- `spending` — Monthly spending: `npx @lumioui/cli add pro/donut-chart-spending`
- `storage` — Storage breakdown: `npx @lumioui/cli add pro/donut-chart-storage`

## Props

### DonutChart

| Prop | Type | Notes |
| --- | --- | --- |
| `data` | `DonutSegment[]` | — |
| `size?` | `number` | Outer diameter in pt. Default 220. |
| `thickness?` | `number` | Ring thickness in pt. Default 26. |
| `gap?` | `number` | Surface gap between slices in pt. Default 3. |
| `shape?` | `"full" | "half"` | "full" ring (default) or a "half" arc that opens downward. |
| `rounded?` | `boolean` | Round slice ends. Default true. |
| `selectedIndex?` | `number | null` | Controlled selection — `null` for none. |
| `defaultSelectedIndex?` | `number | null` | Uncontrolled initial selection. Default null. |
| `onSelect?` | `(index: number | null, segment: DonutSegment | null) => void` | — |
| `interactive?` | `boolean` | Allow touch and drag-around selection. Default true. |
| `totalLabel?` | `string` | Centre label with nothing selected. Default "Total". |
| `litIndex?` | `number | null` | With nothing selected, keep this slice lit and dim the rest — e.g. the free space on a nearly full disk. Default null. |
| `centerValue?` | `"value" | "percent"` | Centre figure for a selected slice — its value (default) or its share. |
| `formatValue?` | `(value: number) => string` | Format values (centre figure, screen-reader text). |
| `renderCenter?` | `(info: DonutCenterInfo) => React.ReactNode` | Replace the default centre entirely. |
| `accessibilityLabel?` | `string` | Screen-reader summary. Default lists every slice. |
| `className?` | `string` | — |

### DonutLegend

| Prop | Type | Notes |
| --- | --- | --- |
| `data` | `DonutSegment[]` | — |
| `layout?` | `"list" | "bars" | "grid"` | "list" — inset rows with value + share; "bars" — rows with a share bar;  "grid" — two-column swatches with the share as the figure. |
| `selectedIndex?` | `number | null` | — |
| `onSelect?` | `(index: number | null, segment: DonutSegment | null) => void` | Tapping a row selects its slice; tapping the selected row clears. |
| `formatValue?` | `(value: number) => string` | — |
| `describe?` | `(segment: DonutSegment, index: number) => string | undefined` | Detail line under each label (list and bars layouts). |
| `className?` | `string` | — |

Source: https://lumioui.com/components/donut-chart