Scatter chart

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

Two measures of many items against each other, one point per item, or a bubble chart when a third measure sizes the points: groups by colour and shape with a legend that turns them off, optional quadrants with their names and a trend line, the nearest point read on hover or walked with the arrow keys, and items missing a value counted as not measured instead of placed at zero.

Use it for

Two measures per item and the question is how they relate: accounts by seats and usage, features by effort and impact, endpoints by traffic and latency.
Spotting outliers and clusters, or sorting items into quadrants (a 2×2).

Not for

One measure over time (line-chart).
Few items compared on one measure (bar-chart or bar-list).
Change between two moments per item (slope-chart).

Anatomy

chart frame: title, description, legend (groups), table button
plot: value axes on both sides with their titles, grid, optional quadrant lines and names, optional trend line
points: a shape per group (circle, square, diamond, triangle) and colour; sized by a third measure in bubble mode
tooltip: the item's name, both measures and the size
a hatched note counting items that could not be placed

Variants

0: bubbles: size points by `size` (area, not radius, follows the value)
1: quadrants: lines at chosen x and y with a name in each corner
2: trend: least-squares line per group, across that group's own range
3: x and y log scale? not offered: unequal steps mislead at a glance

States

loading (scattered points waiting)
empty
not measured (items missing x or y: counted under the plot, never drawn at 0)
active point (hover, arrow keys or pinned: others fade toward the card, its value lines meet the axes)
group off (legend)
data changed (points glide to their new places, new ones grow in)
table view

Keyboard

The plot is one tab stop: ← → move to the next point along x, ↑ ↓ along y; Home / End the first / last along x
Enter pins the point (onPointClick); Escape unpins
The legend toggles groups; the table view lists every item

Motion

Points grow in from west to east on first draw. New data glides every point to its place over the chart duration; a point that is new grows in, one that leaves shrinks out. The active point's guide lines arrive at once. Reduced motion places everything at once; nothing runs at rest.

Props

Prop	Type	Default	Description
`data` (required)	`ScatterPoint[]`	—	{ id, label, x: number \| null, y: number \| null, size?, group? }.
`series`	`ChartSeries[]`	—	The groups: key (matching point.group), label, colour.
`xLabel / yLabel / sizeLabel`	`string`	—	What each measure is; shown as axis titles and in the tooltip.
`xFormat / yFormat / sizeFormat`	`(v: number) => string`	—	How each measure reads.
`bubbles`	`boolean`	—	Size points by `size`. Default true when any point has a size.
`quadrants`	`{ x: number; y: number; labels?: [string, string, string, string] }`	—	Lines at x and y; labels top-left, top-right, bottom-left, bottom-right.
`trend`	`boolean`	—	A least-squares line per group, drawn across the group's own range.
`zero`	`boolean`	—	Start both axes at zero. Default false.
`active / defaultActive / onActiveChange`	`string \| null`	—	The pinned point's id.
`onPointClick`	`(point) => void`	—	Click or Enter on a point.
`height`	`number \| "fill"`	—	Default 320.
`title / hideTitle / description / table / loading / emptyLabel / actions`	`…`	—	The chart frame every chart shares.
`className / classNames / style / ref`	`string / ChartClassNames / CSSProperties / Ref<HTMLElement>`	—	The chart figure and its frame parts.

Dependencies

motion

Import

import { ScatterChart } from "@/components/scatter-chart/scatter-chart";

Get it

Scatter chart is part of Beamline: 200+ components and 50+ complete screens for React that 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 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent