ScatterPlot

Numeric x/y point clouds with nice ticks and gridlines on both axes. Multi-series clouds use the series tokens; pressing near a point rings it and flags its coordinates.
Load vs latency
us-east
eu-west
ap-south
iOS
Load vs latency
us-east
eu-west
ap-south
Android
Load vs latency
us-east
eu-west
ap-south
Web
tsx
<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 }] }
]}
/>

Props

Prop
Description
series
required
ScatterSeries[]
The point clouds; colors follow the chart-1..8 tokens in fixed order.
title
string
Optional heading shown above the plot.
success
boolean
Tone (single-series only; pick one; default is the primary fill).
destructive
boolean
Tone (single-series only; pick one; default is the primary fill).
compact
boolean
Density (omit for the default plot size).
hideLegend
boolean
Furniture visibility.
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
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.

Do & Don’t

Series per group

Don’t
Pour every group into one series; the points share one color and no legend, and the clusters run together.
Do
us-east
eu-west
ap-south
Split the points into one series per group; each takes its own series color and a legend entry, so the clusters can be told apart.
← RangeAreaChart
ServiceHealthList →