Charts
ScatterChart
Two measures against each other, one mark per observation.
When to reach for it
Correlation, clustering, outliers — the questions that do not survive being bucketed into a bar. The only chart here whose x axis is a number rather than a category.
Examples
default
| kb | Load (ms) |
|---|---|
| 120 | 340 |
| 180 | 412 |
| 240 | 505 |
| 310 | 618 |
| 360 | 660 |
| 420 | 790 |
| 470 | 812 |
shape and variant
| kb | Load (ms) |
|---|---|
| 120 | 340 |
| 180 | 412 |
| 240 | 505 |
| 310 | 618 |
| 420 | 790 |
| 130 | 520 |
| 190 | 610 |
| 250 | 704 |
| 320 | 861 |
| 430 | 990 |
bubbles
| kb | Load (ms) | Downloads |
|---|---|---|
| 120 | 340 | 400 |
| 180 | 412 | 1,200 |
| 240 | 505 | 260 |
| 310 | 618 | 2,400 |
| 420 | 790 | 900 |
Notes
Two measures against each other, one mark per observation — the shape for "is there a relationship here".
The only chart in the set whose x axis is a NUMBER rather than a category, which is the whole point: a scatter answers correlation, clustering and outliers, and none of those questions survive being bucketed into a bar.
Past three series, shape stops separating them and the answer is small multiples — one chart per series, same axes — rather than a fourth mark.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | The composed parts — axes, grid, tooltip, legend, and the marks themselves. | |
| configrequired | ChartConfig | Series keys → their label and paint. Declaration order is ramp order. | |
| titlerequired | string | What the chart shows, in a sentence a reader could act on. Required, and announced to a screen reader even when it is not printed. | |
| chartProps | ComponentProps<typeof RechartsScatterChart> | Escape hatch onto the raw Recharts chart element. | |
| className | string | Merged onto the figure, last, so a call site can size or space it. | |
| defaultSelectedDataKey | string | null | null | The series lit on first render. Selection dims every other series. |
| description | ReactNode | A line under the title — the unit, the window, the caveat. | |
| onSelectionChange | (selectedDataKey: string | null) => void | Fires when the selection changes, and with null when it is cleared. | |
| showTitle | boolean | Prints the title above the plot instead of hiding it from sight. | |
| table | ScatterTable | false | The rows behind the hidden table view, with the fields to print. Scatter data lives on each `<Scatter>` rather than on the root, so unlike every other chart here the table cannot be inferred — it is declared. |
Types
export type ScatterShape = 'circle' | 'square' | 'triangle' | 'diamond' | 'cross' | 'ring'
export type ScatterVariant = 'solid' | 'outline' | 'gradient'Accessibility
- title is required. The table view is declared rather than inferred: scatter data lives on each series, so there is no single set of rows to read off the root.
- Shape does the work hue does elsewhere. Two overlapping clouds separate far better by circle-versus-cross than by two steps of grey — and shape survives overprinting, which a lightness step does not.
- A solid mark carries a surface-coloured ring, so two observations that land on top of each other stay countable.
- ZAxis maps its measure to a mark’s AREA, not its radius: doubling a radius quadruples the ink, which is the most common way a bubble chart lies.