Line chart

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

Values over time as lines: curves, point markers, dashed series for forecasts, reference lines for limits and targets, an optional zero baseline and a range handle; missing values break the line.

Use it for

Trends and comparisons between a few series (latency percentiles, actual vs forecast).
A value against a limit or target (references).

Not for

Totals that stack (area-chart).
Categories (bar-chart).
Tiny inline trends (sparkline).

Anatomy

title and description (figcaption; can be visually hidden)
actions slot (range, type)
legend (toggle buttons)
table button
plot (kept left to right in RTL: time runs one way, O1 D2)
tooltip
lines
unmeasured band (hatched, “Not measured”) over a run where no visible series was measured
point markers
reference lines with labels (haloed by the card where a line crosses them)
range handle

Variants

0: curve: linear · monotone · step · bump · natural
1: dots: none · all · last
2: series dashed (forecast)
3: references (neutral · danger · success)
4: zero baseline
5: brush

States

loading (skeleton bars)
empty (no data for the range)
missing values: a series with a gap breaks; where no visible series was measured the break is a hatched band that says Not measured; tooltip and table say Not measured
series hidden from the legend
table view

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
With brush: each end of the range handle is a slider; ←/→ move it one point

Motion

Lines are revealed left to right once (sweep duration); afterwards a rescaled axis, a hidden series or new data carries the lines to their new heights. 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`	—
`curve`	`ChartCurve`	—
`dots`	`"none" \| "all" \| "last"`	—
`references`	`ChartReference[]`	—	{ y, label, tone? } horizontal markers.
`zero`	`boolean`	—	Start the value axis at 0.
`brush`	`boolean`	—
`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 { LineChart } from "@/components/line-chart/line-chart";

Get it

Line 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