Composed chart

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

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.

Use it for

Two measures with different units over the same periods (orders and conversion rate).
A volume with its trend line.

Not for

One measure (line-chart, area-chart or bar-chart).
Unrelated measures that need separate scales to be read honestly (two charts side by side).

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
bars, lines and areas
left axis
right axis
reference lines
axis captions: with two value axes, each names the series it carries above its ticks

Variants

0: per series type: bar · line · area
1: per series axis: left · right
2: curve
3: references

States

loading (skeleton bars)
empty (no data for the range)
missing values (gap, hatched or stub; 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

Motion

Bars grow out of the baseline and lines and areas are revealed left to right once (500 ms); afterwards a hidden series or new data carries the marks 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`	—
`series[].type / series[].axis`	`"bar" \| "line" \| "area" / "left" \| "right"`	—
`y2Format`	`(v) => string`	—	Format of the right axis and its series.
`curve`	`ChartCurve`	—
`references`	`ChartReference[]`	—
`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 { ComposedChart } from "@/components/composed-chart/composed-chart";

Get it

Composed 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