ScatterChart

Basic

Label	Page complexity	Issues found
Homepage	12	3
Dashboard	28	7
Settings	45	12
About	8	1
Reports	35	9

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"
  aria-label="Complexity vs issues"
/>

Multi-series

Audit 1Audit 2

Series	Elements	Violations
Audit 1	10	2
Audit 1	25	5
Audit 1	40	8
Audit 2	15	4
Audit 2	30	3
Audit 2	50	10

<ScatterChart
  series={[
    { name: 'Audit 1', data: [...], color: 'var(--color-interactive)' },
    { name: 'Audit 2', data: [...], color: 'var(--color-success)' },
  ]}
  xLabel="Elements"
  yLabel="Violations"
  aria-label="Audit comparison"
/>

Props

Prop	Type	Default	Description
data	ScatterPoint[]	—	Single series: { x, y, label? }
series	ScatterSeries[]	—	Multi-series: { name, data, color? }
xLabel	string	—	X-axis title
yLabel	string	—	Y-axis title
grid	”horizontal” | “vertical” | “both” | “none"	"both”	Grid line visibility
formatValue	(v: number) => string	String	Format tick values
onPointClick	(point, si, pi) => void	—	Click handler per point
aria-label	string	—	Required.