Grouped bar chart — Björk UI

Components•Grouped bar chart

Grouped bar chart

Categories against up to six series, grouped side by side, stacked, or stacked to 100%. Switching modes morphs the bars in two steps so you can follow each one, negatives hang below an emphasised zero line, and the legend toggles series without ever hiding the last. On narrow screens it turns horizontal by itself so labels never collide.

Dependencies

Motion

Copy below cli

npx shadcn add @bjork-ui/grouped-bar-chart

How to use

import { GroupedBarChart } from "@/components/bjork-ui/charts/grouped-bar-chart";<GroupedBarChart  categories={[    { id: "q1", label: "Q1" },    { id: "q2", label: "Q2" },  ]}  series={[    { id: "na", label: "North America", values: [1840000, 1970000] },    { id: "emea", label: "EMEA", values: [1120000, 1180000] },  ]}  mode="grouped"  orientation="auto"  formatValue={(v) => `${v < 0 ? "−" : ""}$${(Math.abs(v) / 1e6).toFixed(1)}M`}/>

Quarterly revenue by region, value by category
Category	North America	EMEA	Asia Pacific	Latin America	Total
Q1 ’25	$1.8M	$1.1M	$620K	$210K	$3.8M
Q2 ’25	$2M	$1.2M	$710K	$240K	$4.1M
Q3 ’25	$2.1M	$1.3M	$780K	$260K	$4.4M
Q4 ’25	$2.4M	$1.5M	$940K	$310K	$5.1M
Q1 ’26	$2.4M	$1.4M	$1M	$330K	$5.2M
Q2 ’26	$2.6M	$1.6M	$1.2M	$370K	$5.7M

Options

Dataset

Mode

Axis

Values