Data viz
Scatter & bubble
For correlation — how two measures relate across many items. Each dot is a record placed by its x and y; a third dimension can size it into a bubble. Same SVG foundation and theme as the family: shared series palette, a dark per-point tooltip, and an optional quadrant overlay for prioritization.
npx shadcn@latest add @orbit/scatter-chartOverview
Correlated points, colored by series. Hover a point for its exact values.
Variants
Plain scatter plots two measures as equal dots. Bubble adds a third — point area encodes a z value like team size or cost. A single variant prop switches between them.
Quadrants
Turn showQuadrants on to split the plane with reference lines and shade the corners — low-effort/high-impact “quick wins” against high-effort/low-impact “money pits.” The classic effort–impact matrix.
In context
A planning card — the scatter paired with the takeaways it surfaces.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "scatter" | "bubble" | "scatter" | scatter plots equal dots; bubble sizes each point's area by its z value. |
| series | { name: string; points: { name: string; x: number; y: number; z?: number }[]; color?: string }[] | — | The point series. Colors default to the fixed CHART_SERIES palette by position. |
| accent | string | "var(--pri)" | Mark color when exactly one series is plotted (any token or color-mix). |
| height | number | 320 | Total height in px, legend row included. Width is responsive. |
| showGrid | boolean | true | Hairline gridlines at every x and y tick. |
| showLegend | boolean | true | Top-right dot legend. Never rendered for one series. |
| showQuadrants | boolean | false | Dashed reference lines at the quadrant split with shaded, labeled corners. |
| xLabel / yLabel | string | — | Axis titles with units, e.g. “Effort (story points) →”. |
| xName / yName / zName | string | "X" / "Y" / "Size" | Measure names for the tooltip rows. |
| xDomain / yDomain | [number, number] | — | Fixed axis ranges (5 even ticks). Default: nice ticks over the data from zero. |
| quadrantX / quadrantY | number | domain midpoints | Where the quadrant guides split each axis. |
| quadrantLabels | { topLeft?: string; bottomRight?: string } | "QUICK WINS" / "MONEY PITS" | Corner tags for the quadrant overlay. |
| bubbleRange | [number, number] | [60, 620] | Bubble area range in px² that the z extent maps onto. |
| formatX / formatY / formatZ | (v: number) => string | String | Formats the tooltip values. |
| ariaLabel | string | — | Plain-language summary for the chart's role=“img”. |
| …rest | HTMLAttributes<HTMLDivElement> | — | Forwarded to the root div, including ref and className. |
Usage
Scatter plots reveal correlation and outliers across many records. Reach for them when the relationship between two measures matters more than any single value.
Use it for correlation
Scatter is the right tool when you want to show how two measures move together across many items.
Plot only a handful of points
With five or six records a labeled bar or table reads clearer — scatter earns its keep with density.
Add quadrants to prioritize
Reference lines turn a cloud into a decision: quick wins, big bets, fill-ins, money pits.
Overload the bubble dimension
Area is hard to judge precisely — use z for rough magnitude, not values that must be compared exactly.
Keyboard & accessibility
The chart renders as a labelled image with every point's data on hover; series identity never rides on color alone.