ScatterPlot

Chart
Numeric x/y point clouds with nice ticks on both axes and horizontal gridlines. Multi-series clouds use the series tokens; pressing near a point rings it and flags its coordinates.
src/charts/scatter-plot
View in Charts

Playground

Every control sets a real prop of ScatterPlotProps. The JSX below updates as you go.
Load vs latency
us-east
eu-west
ap-south
Props
Tone
pick one
hideLegend
boolean
hideGrid
boolean
compact
boolean
JSX · ScatterPlotProps
<ScatterPlot />

Variants

1 examples from src/charts/scatter-plot/scatter-plot.md, each rendered live from its own JSX.
Compact single series
<ScatterPlot
compact
series={[
{ label: "Campaigns", points: [{ x: 1.2, y: 14 }, { x: 2.8, y: 26 }, { x: 4.2, y: 38 }, { x: 5.9, y: 46 }, { x: 7.3, y: 58 }, { x: 8.1, y: 63 }] }
]}
/>

Anatomy

Load vs latency
us-east
eu-west
ap-south
1
Chart frame
2
Series
3
Axis labels
4
Legend
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

15 props on ScatterPlotProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
2 props
series *
ScatterSeries[]
–
The point clouds; colors follow the chart-1..8 tokens in fixed order.
title
string
–
Optional heading shown above the plot.
Tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Density
2 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
Furniture visibility
9 props
hideLegend
boolean
false
Furniture visibility.
hideGrid
boolean
false
Furniture visibility.
hideAxes
boolean
false
Furniture visibility.
formatValue
(v: number) => string
–
Formats tick labels and accessible values (data formatting, not styling).
selected
ScatterSelection | null
–
Press-to-inspect: the selected point (controlled). Pass null for none.
defaultSelected
ScatterSelection
–
Press-to-inspect: the initially selected point (uncontrolled).
onSelect
(selection: ScatterSelection | null) => void
–
Fired when a press selects a point (or clears it with null).
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<ScatterPlot
title="Load vs latency"
series={[
{ label: "us-east", points: [{ x: 94, y: 20 }, { x: 220, y: 37 }, { x: 339, y: 63 }, { x: 446, y: 71 }, { x: 596, y: 99 }, { x: 741, y: 115 }] },
{ label: "eu-west", points: [{ x: 114, y: 33 }, { x: 227, y: 52 }, { x: 340, y: 92 }, { x: 455, y: 111 }, { x: 579, y: 129 }, { x: 737, y: 141 }] },
{ label: "ap-south", points: [{ x: 133, y: 45 }, { x: 251, y: 72 }, { x: 377, y: 102 }, { x: 492, y: 135 }, { x: 613, y: 161 }, { x: 740, y: 171 }] }
]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--c2
--fd
--fm
--ft
--ln
--sf
--sh-sm
--tx2
--tx3

Related components