Scatter Chart

Shows how two measures relate, one point per row, grouped by color or sized as bubbles.

Beta

Web

iOS

Android

@advui/charts

Source

Grouped points

Preview

Code

Budget and reach, by project2026, thousands

Health

WASH

Education

Installation

Package

CLI (copy source)

pnpm

pnpm add @advui/charts

npm

npm install @advui/charts

Usage

import { ScatterChart } from '@advui/charts'

<ScatterChart
  title="Budget and reach"
  data={[{ project: 'Clinics', budget: 420, reached: 38 }, { project: 'Wells', budget: 310, reached: 52 }]}
  x="budget"
  y="reached"
  index="project"
/>

Examples

Bubbles

Preview

Code

Coverage falls with distanceKachin townships; bubble size is population

API reference

ScatterChart

Prop	Type	Default	Description
`title` required	`string`	—	Names the chart: its heading and accessible name.
`description`	`string`	—	Muted line under the title (units, period).
`data` required	`T[]`	—	One object per point. Its type `T` (an interface works) is inferred, and the field props must name its fields. Rows missing `x` or `y` are left out of the plot and keep a row in the table.
`x` required	`keyof T & string`	—	Numeric field for the horizontal position.
`y` required	`keyof T & string`	—	Numeric field for the vertical position.
`xLabel`	`string`	`x`	Names the x axis in the plot, the tooltip and the table.
`yLabel`	`string`	`y`	Names the y axis in the plot, the tooltip and the table.
`index`	`keyof T & string`	—	Field naming each point, for the tooltip and the table.
`indexLabel`	`string`	`index`	Heading of the name column in the table view.
`category`	`keyof T & string`	—	Field that groups the points. Each group gets a color (`chart1`…`chart8`, in order of appearance) and a legend entry.
`categoryLabel`	`string`	`category`	Heading of the group column in the table view.
`size`	`keyof T & string`	—	Numeric field that sizes each point by its area, from 4 to 20px across: a bubble chart.
`sizeLabel`	`string`	`size`	Names the size field in the tooltip and the table.
`startAtZero`	`boolean`	`false`	Both axes start at zero instead of near the smallest value.
`valueFormatter`	`(value: number, field: 'x' \| 'y' \| 'size') => string`	—	Formats tooltip and table values; `field` says which, as the axes often have different units. Axis ticks are compact (1.2K).
`height`	`number`	`280`	Pixels, including the axes.
`width`	`number`	—	Fixed width. By default it fills its container.
`surface`	`ColorTokens`	`'background'`	The color behind the chart, for the ring around points. Use `card` inside a Card.
`labels`	`Partial<ChartLabels>`	—	"Show table", "Hide table" and the keyboard hint, for translation.

Accessibility

The chart is a figure named by its title. The plot is one focusable image whose name gives the title, description and a hint; the arrow keys (Home / End too) step through the points from left to right, and a polite live region reads each one out.
Every chart has a table view ("Show table") with the same values, in the order of data, so nothing depends on seeing colors or hovering.
Identity never relies on color alone: two or more groups get a legend, and the tooltip names each point, its group and its values.
Colors come from the chart1…chart8 theme keys, a palette checked for color-blind separation in light and dark mode.

Keyboard interactions
Key	Action
`Tab`	Focuses the plot, then the table button.
`Arrow keys / Home / End`	Move between points, left to right.
`Escape`	Hides the tooltip.

Responsive behavior

Fills its container; the axes keep their ticks and the points move closer together on narrow screens.

Platform notes

Web

SVG in the page. Hover near a point to show its tooltip; the arrow keys work once the plot has focus.

iOS

Drawn with react-native-svg. Tap near a point to show its tooltip. VoiceOver and TalkBack read the title and description, without the arrow-key hint; Show table lists every point.