Data viz
Bar chart
The first of the chart family — hand-rolled SVG dressed entirely in our system: Geist axes, tokened gridlines, a dark tooltip that matches the rest of the kit, and the fixed Orbit series palette. One component, four layouts.
npx shadcn@latest add @orbit/bar-chartOverview
Discrete categories compared by length. Hover a bar for exact values.
Variants
A single variant prop switches between vertical columns, horizontal bars, grouped series, and stacked totals — same data, same theme.
Options
Drop the gridlines for a minimal look, print values on the bars, or recolor a single-series chart with one accent token.
In context
Sitting in a stat card beside the metrics it explains — the throughput panel of a project dashboard, with a working range toggle.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "vertical" | "horizontal" | "grouped" | "stacked" | "vertical" | Layout. vertical/horizontal plot data; grouped/stacked plot categories + series. |
| data | { label: string; value: number }[] | — | Single-series rows for vertical | horizontal. |
| categories | string[] | — | Category labels for grouped | stacked. |
| series | { name: string; values: number[]; color?: string }[] | — | Multi-series values. Colors default to the fixed CHART_SERIES palette by position. |
| accent | string | "var(--pri)" | Single-series bar color (any token or color-mix). |
| height | number | 340 | Total height in px, legend included. Width is responsive. |
| showGrid | boolean | true | Hairline gridlines across the value axis. |
| showValues | boolean | false | Prints values beside the bars (single-series variants). |
| showLegend | boolean | true | Legend under multi-series charts. Never rendered for one series. |
| name | string | "Value" | Single-series name shown in the tooltip. |
| formatValue | (v: number) => string | String | Formats tooltip, axis, and printed values. |
| ariaLabel | string | — | Plain-language summary for the chart's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
Bars compare discrete categories — keep the comparison honest and easy to read.
Start the value axis at zero
Bars encode length — a non-zero baseline exaggerates differences and misleads. The scale here always includes zero.
Stack unrelated series
Only stack parts that genuinely sum to a meaningful whole, or the total is noise.
Go horizontal for long labels
When category names are wordy, horizontal bars keep them readable without rotation.
Crowd in too many series
Past three or four grouped bars per category the comparison gets hard — split it up, or fold the long tail into “Other”.
Keyboard & accessibility
The chart renders as a labelled image with its data available on demand; identity never rides on color alone.