## Waffle Chart (S—299)

A 10 × 10 waffle of parts of a whole: each category gets its own tone, and hovering the legend lights its squares.

- URL: https://sundaeui.dev/components/waffle-chart
- 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/waffle-chart.json`
- Tags: waffle, composition, percent, chart, parts-of-whole, infographic

One hundred squares, one per percent. Categories step down a monochrome ramp (solid, two tints, outline, faint) so the chart survives greyscale and colour-blindness.
Hovering or focusing a legend item dims everything else and states its share.

### Usage

```tsx
import { WaffleChart } from '@/components/sundae/waffle-chart'

<WaffleChart />
```

### Props

- `parts` (`{ name: string; value: number }[]`, required): Parts; normalised to 100.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Shares in reports and editorial graphics.

### When not to use

- More than five parts: use bars.

### Accessibility

- The grid is decorative; the legend lists every part with its percent.
- Legend items are buttons that highlight their squares.
- Reduced motion removes the movement and keeps every state change.