ScatterChart

Basic

Complexity vs accessibility issues

Scatter chart, 5 points. 8 to 45. Values from 1 to 12.

Show data table

import { ScatterChart } from '@eekodigital/raster';

<ScatterChart
  data={[
    { x: 12, y: 3, label: 'Homepage' },
    { x: 28, y: 7, label: 'Dashboard' },
  ]}
  xLabel="Page complexity"
  yLabel="Issues found"
  title="Complexity vs issues"
/>

Multi-series

Audit comparison

Scatter chart, 2 series, 6 points. 10 to 50. Values from 2 to 10.

Audit 1Audit 2

Show data table

<ScatterChart
  series={[
    { name: 'Audit 1', data: [...], color: 'var(--demo-accent)' },
    { name: 'Audit 2', data: [...], color: 'var(--demo-good)' },
  ]}
  xLabel="Elements"
  yLabel="Violations"
  title="Audit comparison"
/>

Accessibility

• A role="figure" named by the visible title and described by a generated summary (chart type, series and point counts, range).
• The SVG is a role="group" with aria-roledescription="chart"; no graphics-* roles.
• Named series are role="group"s. Each point is labelled {series}, {x}: {y}, 3 of 12 (with its label when given). With onSelect, selectedIndex or a click handler, marks are role="button" with aria-pressed; otherwise they’re static role="img".
• Points use a different marker shape per series.
• Arrow keys move in x order, so left and right match the drawing.
• A visible Show data table button (aria-expanded) reveals a real table captioned Data for {title}, with th scope headers and values run through formatValue.
• Escape (inside the chart only) clears the selection and announces it in a polite live region; it doesn’t close a surrounding dialog.
• Animations stop under prefers-reduced-motion. In forced-colours mode marks use system colours, told apart by dash pattern and marker shape.

Key	Action
← / →	Previous / next mark
Home / End	First / last mark
PageUp / PageDown	Back / forward 10 marks
↑ / ↓	Previous / next series
Tab	Leave the chart (one tab stop)
Enter / Space	Toggle selection (interactive marks)
Escape	Hide the tooltip and clear selection

See the Accessibility guide for the shared structure, the labels prop and screen-reader testing.

Props

Prop	Type	Default	Description
data	ScatterPoint[]	—	Single series: { x, y, label? }.
series	ScatterSeries[]	—	Named series: { name, data, color? }.
xLabel	string	—	X-axis title.
yLabel	string	—	Y-axis title.
grid	“horizontal” | “vertical” | “both” | “none”	“both”	Grid lines.
formatValue	(value: number) => string	Intl.NumberFormat	Formats values in ticks, marks and the table. Defaults to Intl.NumberFormat(labels.locale).
height	number	240	Plot height in px.
aspectRatio	number	—	Width ÷ height, instead of height. The plot box is sized in CSS either way, so server-rendered and hydrated layouts match.
onPointClick	(point, seriesIndex, pointIndex) => void	—	Makes points buttons.
selectedIndex	{ series, point } | null	—	Controlled selection.
onSelect	(index | null) => void	—	Makes points buttons.
title	string	—	Required. Visible title: names the figure and captions the data table.
hideTitle	boolean	false	Hide the title visually. It still names the chart for assistive technology.
labels	Partial<ChartLabels>	English	Generated strings and the number locale. See Accessibility.
dataTable	“disclosure” | “visually-hidden”	“disclosure”	How the data table is offered.
exportRef	Ref<ChartExportHandle>	—	SVG/PNG export. See Exporting charts.
className	string	—	Class on the figure.