## Stacked Bars (S—045)

A stacked bar chart with a Day/Week toggle; bars regrow with a stagger and the total follows your cursor.

- URL: https://sundaeui.dev/components/stacked-bars
- Category: Cards & data visualization · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/stacked-bars.json`
- Tags: dashboard, bar, chart, data, analytics, stacked

Four series stack into each bar. Switching range animates every bar to its new height in a quick left-to-right wave.
Hovering or focusing a bar dims the others and swaps the headline total for that bar’s value.

### Usage

```tsx
import { StackedBars } from '@/components/sundae/stacked-bars'

<StackedBars
  title="Traffic"
  series={[{ label: 'Direct', color: '#fafafa' }, { label: 'Search', color: '#737373' }]}
  data={{ day: dayBars, week: weekBars }}
/>
```

### Props

- `series` (`BarSeries[]`, required): Label and colour per stacked series.
- `data` (`Record<string, number[][]>`, required): Bars per range key; one value per series.
- `ranges` (`{ key; label }[]`, default `Day, Week`): Range toggle options.
- `title / unit` (`string`, default `'Traffic' / 'visits'`): Heading and unit.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Dashboard tiles that compare a few sources over time.
- Places where a quick range switch matters more than exact axes.

### When not to use

- Precise reading of values: add axes or use a table.
- More than five series.

### Accessibility

- The range toggle is a radiogroup.
- Each bar is focusable with an aria-label listing every series value.
- The headline total is a polite live region.

### Keyboard

- Tab: Move through bars
- Enter / Space: Choose a range