Small multiples

Compares repeated charts on shared axes. Each panel occupies one 184px column.

Preview

Alkmaar

Chart data of Sheets
Label	Sheets
Mon	12
Wed	15
Fri	24

Delft

Chart data of Sheets
Label	Sheets
Mon	8
Wed	9
Fri	14

In action

Set

Three cities

The same axes, repeated. One 184 column each.

Alkmaar

Sheetssheets

Chart data of Sheets, in sheets
Label	Sheets
Mon	12
Tue	18
Wed	15
Thu	26
Fri	24

Delft

Sheetssheets

Chart data of Sheets, in sheets
Label	Sheets
Mon	8
Tue	11
Wed	9
Thu	16
Fri	14

Haarlem

Sheetssheets

Chart data of Sheets, in sheets
Label	Sheets
Mon	6
Tue	7
Wed	10
Thu	9
Fri	12

When to use

Use it for

The same measure across places, products, or periods, one small line chart per panel on shared axes.
Four to eight panels in a row of 184px columns.

Not for

Panels with different units; they no longer compare.
One series; use LineChart.

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 { SmallMultiples } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add small-multiples

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/small-multiples.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 { SmallMultiples } from "@noorddev/vlak-react";

<SmallMultiples
  height={136}
  panels={[
    { title: "Alkmaar", labels: days, series: [{ name: "Sheets", values: alkmaar }] },
    { title: "Delft", labels: days, series: [{ name: "Sheets", values: delft }] },
  ]}
  unit="sheets"
/>

Props

SmallMultiples

Prop	Type	Default	Description
`panels`required	`SmallMultiple[]`
`height`	`number`	`136`
`unit`	`string`
`grid`	`boolean`	`true`
`ticks`	`number`	`3`
`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 each panel's plot in turn
`Arrow right, Arrow left, Home, End, Escape`	Move and clear the cursor inside the focused panel

Accessibility

Each panel is a <figure> with a caption; its plot is labelled by that caption and carries its own hidden table.

Markup

<div class="rs-chart-multi"><div class="rs-chart"><svg viewBox="0 0 184 64" width="184" height="64"><path class="rs-chart-line" d="M0 40 L46 28 L92 34 L138 16 L184 22"/></svg></div><div class="rs-chart"><svg viewBox="0 0 184 64" width="184" height="64"><path class="rs-chart-line" d="M0 30 L46 36 L92 22 L138 28 L184 18"/></svg></div></div>

Classes

.rs-chart-multi

Depends on

/chart