## Donut Breakdown (S—107)

A monochrome donut chart widget: hover a slice or legend row to lift it and show its share in the centre.

- URL: https://sundaeui.dev/components/donut-breakdown
- Category: Cards & data visualization · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/donut-breakdown.json`
- Tags: pie, chart, donut, widget, breakdown, spending

Slices use tones of one colour instead of a rainbow. Hovering or focusing a slice or its legend row pushes the slice out slightly, dims the others and swaps the centre to that category’s value and share.
Slices draw in clockwise on mount.

### Usage

```tsx
import { DonutBreakdown } from '@/components/sundae/donut-breakdown'

<DonutBreakdown />
```

### Props

- `data` (`{ label: string; value: number }[]`, required): Slices.
- `format` (`(n: number) => string`): Value formatter.
- `title` (`string`, default `'Total'`): Centre caption when nothing is hovered.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Spending, storage, traffic sources: 3–6 parts of a whole.

### When not to use

- Comparing many similar values: use bars.

### Accessibility

- The SVG is aria-hidden; the legend is a list of buttons with value and percentage, which drives the same highlight.
- A visually hidden table carries the data.
- Reduced motion removes the movement and keeps every state change.