# Bar chart

A React component in [Beamline](https://beamline.io/)'s [Charts & data-vis](https://beamline.io/components/charts) category. Live demo: https://beamline.io/components/bar-chart

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](https://beamline.io/components/line-chart) or [area-chart](https://beamline.io/components/area-chart)).
- Parts of one whole with few slices ([pie-chart](https://beamline.io/components/pie-chart)).
- A ranked list with labels and values in text ([bar-list](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Charts & data-vis

- [Activity heatmap](https://beamline.io/components/activity-heatmap): A calendar of daily counts, one cell per day on a sequential ramp: weeks across, weekdays down, month and weekday labels, a legend scale, hatched days…
- [Area chart](https://beamline.io/components/area-chart): Amounts over time as filled areas: overlapping, stacked or as shares of 100%, five fills, two strokes, five curves, a range handle; gaps for missing…
- [Composed chart](https://beamline.io/components/composed-chart): Different measures on one time axis: bars, lines and areas per series, a left and a right value axis with their own formats, and reference lines.
- [Gauge](https://beamline.io/components/gauge): One value against a known range: a semicircle, a 270° dial or a full ring, filled or with a needle, coloured bands with their names (healthy, busy…
- [Line chart](https://beamline.io/components/line-chart): Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a…
- [Pie chart](https://beamline.io/components/pie-chart): A few shares of a whole as a pie or donut, with spaced slices, percent labels, a centre readout and a list of every slice with value and share; hovering…
- [Radar chart](https://beamline.io/components/radar-chart): A few series compared across the same five to eight dimensions as polygons on a polygon or circle grid; hover or arrow keys pick a dimension and read…
- [Radial chart](https://beamline.io/components/radial-chart): Progress of a few measures toward their targets as concentric rings, full or half circle, with a centre readout and a list of each ring's value, target…
- [Ridgeline](https://beamline.io/components/ridgeline): Distributions per group as overlapping density ridges (response time by region, order size by plan): an overlap control, median and p95 readouts per row…
- [Sankey chart](https://beamline.io/components/sankey-chart): Flows between stages as bands whose width is the amount: sources to pages to outcomes, budgets to teams; hovering or focusing a node lights its flows and…
- [Slope chart](https://beamline.io/components/slope-chart): Change between two points in time per item, by value or by rank: labels on both sides that never collide, rising and falling told by the end marker (▲ ▼)…
- [Sparkline](https://beamline.io/components/sparkline): A compact trend beside its value: point along it or focus it and use ← → to read each point; nulls are gaps. TrendLine is the bare line.
- [Streamgraph](https://beamline.io/components/streamgraph): Stacked flows over time around a centre baseline, with silhouette, wiggle, expand (shares) and zero offsets: a legend that turns layers on and off, a…
- [Treemap](https://beamline.io/components/treemap): Nested rectangles sized by value (spend by team, then service), squarified so tiles stay close to square: labels that fit or hide, hover and focus…
- [Waffle chart](https://beamline.io/components/waffle-chart): Units of a whole as a grid of cells by category (seats used of a plan, tickets by channel): a 10×10 grid by default, hatched cells for units whose…