Small multiples

The same axes, repeated. One 184 column per panel.

Alkmaar

Chart data
Label	Sheets
Mon	12
Wed	15
Fri	24

Delft

Chart data
Label	Sheets
Mon	8
Wed	9
Fri	14

Set

Three cities

The same axes, repeated. One 184 column each.

Alkmaar

Sheetssheets

Chart data
Label	Sheets
Mon	12
Tue	18
Wed	15
Thu	26
Fri	24

Delft

Sheetssheets

Chart data
Label	Sheets
Mon	8
Tue	11
Wed	9
Thu	16
Fri	14

Haarlem

Sheetssheets

Chart data
Label	Sheets
Mon	6
Tue	7
Wed	10
Thu	9
Fri	12

Install

npx @noordvc/raster-cli add small-multiples

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>

React

import { SmallMultiples } from "@/components/raster/chart";

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

Classes

.rs-chart-multi

Depends on

/chart