# Scatter 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/scatter-chart 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](https://beamline.io/components/line-chart)). - Few items compared on one measure ([bar-chart](https://beamline.io/components/bar-chart) or [bar-list](https://beamline.io/components/bar-list)). - Change between two moments per item ([slope-chart](https://beamline.io/components/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` | — | The chart figure and its frame parts. | ## Dependencies `motion` ## Import ```tsx 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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect) ## More in Charts & data-vis - [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… - [Geo map](https://beamline.io/components/geo-map): Values by country as a choropleth on the system's own world outline (no map service): classes from a sequential or diverging ramp with a legend you can… - [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… - [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… - [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… - [Gantt chart](https://beamline.io/components/gantt-chart): A plan as bars on a timeline: tasks grouped down the side, each bar from its start to its end with its progress, milestones as diamonds, arrows from each… - [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… - [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… - [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… - [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… - [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. - [Funnel chart](https://beamline.io/components/funnel-chart): People or deals moving through ordered steps, each step a bar narrowing from the first: the part lost between two steps stays beside the next as a fading… - [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… - [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 (▲ ▼)… - [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… - [Bar chart](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… - [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… - [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.