Shows the relationship between two measures. Marks sit on a 1px grid in ink or one spot color.
Press check
Module against density. Marks, not bubbles. One ink on the field.
Density
Module
| 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 |
Three ways in. They share one source, so the pixels match whichever you pick.
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/chart.
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.
npx shadcn add https://vlak.dev/r/scatter-chart.json
The same registry item, installed by shadcn's CLI.
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
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" }]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
pointsrequired | 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>.
| 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 |
<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>