Grouped or stacked bars with a scrubbing band, rolling values and range morphs.
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))}/>Installation
npx shadcn add @eased-pro/bar-chartNeeds the @eased-pro registry and your Pro token in components.json. Create a token and copy the setup from your account .
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.