Scatter chart

Shows the relationship between two measures. Marks sit on a 1px grid in ink or one spot color.

Preview

Density

Module

Density
Label	Module	Density
Alkmaar	12	18
Haarlem	28	16
Rotterdam	48	22
Groningen	68	26
Amsterdam	80	44

In action

Mark

Press check

Module against density. Marks, not bubbles. One ink on the field.

Density

Module

Density
Label	Module	Density	Group
Alkmaar	12	18	Press
Delft	20	28	Press
Haarlem	28	16	Press
Utrecht	36	34	Press
Rotterdam	48	22	Proof
Eindhoven	56	40	Proof
Groningen	68	26	Proof
Amsterdam	80	44	Proof

When to use

Use it for

Two numeric variables per point; group on a point to split series.
xDomain and yDomain to pin the axes.

Not for

Ordered categories; use BarChart.
Thousands of points; aggregate first.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { ScatterChart } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/scatter-chart.

2. Vendor the source

npx @noorddev/vlak-cli add scatter-chart

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/scatter-chart.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { ScatterChart } from "@noorddev/vlak-react";

<ScatterChart
  height={204}
  points={[{ x: 12, y: 40 }, { x: 40, y: 22, label: "Press" }, { x: 60, y: 30 }]}
  xLabel="Module"
  yLabel="Density"
  annotations={[{ at: 40, label: "204" }]}
/>

Props

ScatterChart

Prop	Type	Default	Description
`points`required	`ChartPoint[]`
`height`	`number`	`204`
`unit`	`string`
`xLabel`	`string`
`yLabel`	`string`
`xDomain`	`[number, number]`
`yDomain`	`[number, number]`
`grid`	`boolean`	`true`
`ticks`	`number`	`4`
`annotations`	`ChartAnnotation[]`	`[]`
`valueFormat`	`(n: number) => string`
`spot`	`string \| boolean`
`locale`	`string`		BCP 47 tag for number formatting; undefined is the reader's own.

Also accepts HTMLAttributes<HTMLDivElement>.

Keyboard

Keys	Does
`Tab`	Focuses the plot
`Arrow right, Arrow left`	Moves the cursor across the points; a status tooltip reads x and y
`Home, End`	First or last point
`Escape`	Clears the cursor

Accessibility

A focusable, named plot with a visually hidden table of x and y per point.

Markup

<div class="rs-chart"><svg viewBox="0 0 240 64" width="240" height="64"><line class="rs-chart-grid" x1="0" x2="240" y1="56" y2="56"/><circle class="rs-chart-mark" cx="36" cy="40" r="2"/><circle class="rs-chart-mark" cx="88" cy="22" r="2"/><circle class="rs-chart-mark" cx="140" cy="30" r="2"/><circle class="rs-chart-mark" cx="196" cy="14" r="2"/></svg></div>

Classes

.rs-chart-mark

Depends on

/chart