Bar chart

A React component in Beamline's Charts & data-vis category.

Amounts by category as bars: columns or rows, grouped, stacked or as shares, reference lines, five looks (rounded, cells, trace, isometric, monospace), a header readout and a highlighted bar, on one data API; a missing value is a stub in its slot, never a zero bar.

Use it for

Comparing amounts across categories or periods (sign-ups per month, pipeline by stage).
Long category names (rows).

Not for

Continuous time with many points (line-chart or area-chart).
Parts of one whole with few slices (pie-chart).
A ranked list with labels and values in text (bar-list).

Anatomy

title and description (figcaption; can be visually hidden)
actions slot (range, type)
legend (toggle buttons)
table button
plot
tooltip
bars
missing-value stubs (8 px hatched slot at the baseline)
reference lines (label just past the line at its inline end, haloed by the card)
readout (label and rolling total, start-aligned)
trace guide (dotted line at the hovered total)

Variants

0: variant: default · grid · trace · isometric · monospace
1: orientation: columns · rows
2: stack: none · stacked · expanded
3: references
4: readout (header label and rolling total, follows the pointer)
5: highlight: max · last (leads at rest)

States

loading (skeleton bars)
empty (no data for the range)
missing values (a hatched 8 px stub in the bar's slot, never a zero bar; tooltip and table say Not measured)
series hidden from the legend
table view
trace: the bar under the pointer leads, the others fade toward the card colour (never through transparency), a dotted guide marks its total, the readout rolls to it
highlight: the largest or latest bar leads at rest; the readout shows it

Keyboard

Tab focuses the plot; ←/→ (or ↑/↓) move the tooltip point by point, including onto unmeasured points; the first press starts at an end; Home/End jump; Escape hides the tooltip
Legend buttons toggle series (aria-pressed)
The table button switches to a table of every value and back

Motion

Bars grow out of the baseline once (500 ms; monospace none); afterwards stacking, a hidden series or new data carries every bar to its new place and size. A bar out of focus fades toward the card colour over --pui-motion-out and the readout rolls. Nothing moves under reduced motion.

Props

Prop	Type	Default	Description
`data / x`	`T[] / keyof T`	—	Rows and the column on the category axis.
`series`	`ChartSeries[]`	—	{ key, label, color?, format?, dashed? } per plotted column; colours follow the series palette.
`title / hideTitle / description`	`string / boolean / ReactNode`	—	The figure's name is always its accessible name.
`xFormat / yFormat`	`(v) => string`	—	Tick, tooltip and table formats.
`height`	`number`	—
`grid / legend / table`	`boolean`	—	Default on.
`loading`	`boolean`	—
`actions`	`ReactNode`	—	Controls beside the legend.
`className`	`string`	—
`variant`	`BarVariant`	—
`orientation`	`"columns" \| "rows"`	—
`stack`	`"none" \| "stacked" \| "expanded"`	—
`references`	`ChartReference[]`	—
`readout`	`boolean`	—	Header label and total that follow the pointer; default on for trace.
`highlight`	`"max" \| "last"`	—	A bar that leads at rest while the others recede.
`classNames`	`ChartClassNames`	—	Frame, tooltip and slice-list parts as applicable to this chart.
`style / ref`	`CSSProperties / Ref<HTMLElement>`	—	The native chart figure; layout measurement refs stay internal.

Dependencies

d3-shape, motion

Import

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

Get it

Bar chart is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent