ScatterChart

Points on two value axes, for correlation and distribution. Unlike Line and Bar, both axes are numeric. Pass symbolSize='bubble' and a third value per point to size each dot by a magnitude. See Charts overview for the loading, empty, events and ref props shared by every chart.

Basic

Each point is an [x, y] tuple; both axes are numeric.

<ScatterChart  ariaLabel="Effort against impact for each initiative"  xValueFormatter={(v) => `${v}d`}  showLegend={false}  series={[    {      name: 'Initiatives',      data: [[2, 8], [5, 6], [9, 9], [12, 4], [7, 7], [4, 3], [15, 8]],    },  ]}/>

Bubble

With symbolSize="bubble", each point is [x, y, size] and the dot scales by the third value.

<ScatterChart  symbolSize="bubble"  ariaLabel="Accounts by spend and engagement, sized by seats"  showLegend={false}  series={[    {      name: 'Accounts',      data: [[12, 40, 120], [28, 62, 480], [45, 55, 260], [63, 78, 900], [80, 30, 150]],    },  ]}/>

Props

Prop	Type	Default	Notes
`series`	`ScatterSeries[]`	—	Each: { name, data: [x, y] or [x, y, size] points }.
`symbolSize`	`number \| 'bubble'`	`12`	Fixed point size, or scale by the third value in each point.
`xValueFormatter`	`(value: number) => string`	—	Formats the x (value) axis.
`valueFormatter`	`(value: number) => string`	—	Formats the y (value) axis.
`colors`	`string[]`	—	Override the theme palette; one colour per series.