# Bar Chart

> Grouped or stacked bars that grow in with a 12ms stagger, glide a scrubbing band with rolling values, and morph keyed bars between ranges while the scale springs. Hatched partial bucket, keyboard slider, hidden data table.

- Tier: Eased Pro
- Interaction: Hover
- Page: https://eased.dev/components/bar-chart

## Install

Bar Chart ships with Eased Pro (https://eased.dev/#pricing). Members add the `@eased-pro` registry with their token (https://eased.dev/account), then run:

```bash
npx shadcn add @eased-pro/bar-chart
```

Grouped or stacked bars with a scrubbing band, rolling values and range morphs.

```tsx
import { BarChart } from "@/components/eased/bar-chart/bar-chart";

<BarChart
  data={days}               // [{ day: "2026-10-17", organic: 212, referral: 88 }, …]
  xKey="day"
  series={[{ key: "organic", label: "Organic" }, { key: "referral", label: "Referral" }]}
  stacked
  partialLast
  label="Signups by day"
  formatX={(k) => short.format(new Date(k))}
/>
```

## Props

| Prop | Type | Default | |
|---|---|---|---|
| `data` | `Record<string, string \| number>[]` | | One datum per bucket, oldest first, values ≥ 0. |
| `xKey` | `string` | | Names each bucket and is the bar's identity across data changes. |
| `series` | `{ key, label, color? }[]` | | Colours default to `chartColor(1…6)`. |
| `label` | `string` | | The figure's name and the hidden table's caption. |
| `stacked` | `boolean` | `false` | Stack instead of grouping side by side. |
| `partialLast` | `boolean` | `false` | Hatch the last bucket (still filling). |
| `height` | `number` | `240` | Plot plus x labels. |
| `format` / `formatTick` / `formatX` / `formatXDetail` | functions | | Values, gridline labels, x labels, tooltip dates. |
| `onActiveChange` | `(index, datum) => void` | | `null` when scrubbing stops. |
| `legend` | `boolean` | 2+ series | |

Keyboard: Tab to the plot, arrows step, PageUp/PageDown jump, Home/End, Escape. A visually hidden table lists every value.

**Motion signature:** bars grow from the baseline with a 12ms stagger once; scrubbing glides a soft band under the bucket, dims the rest and rolls the values; a new range slides bars with the same key into place, grows new ones and sinks retired ones while the scale springs and gridlines slide, all in one beat.