Chart 13 of 15

Small multiples

Use it instead of one crowded multi-line chart, or whenever series have different scales. Each card keeps its own scale, so compare shapes, then click one to read the exact figures.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Cards are buttons: Tab to one and press Enter or Space to show it in the detail chart below.

How to use it

JavaScript
const grid = h('div', { class: 'sm' }, categories.map(c =>
  h('button', { class: 'c', type: 'button', 'aria-pressed': String(c === selected),
      on: { click: () => select(c) } },
    h('span', { class: 'n' }, c),
    h('span', { class: 'v' }, money0(latest[c])),
    spark(series[c], { w: 150, h: 36, label: c + ' trend' }))));

detail.replaceChildren(lineChart({ xs: months, xlabel: monthName,
  series: [{ name: selected, values: series[selected], colour: catColor(selected), area: true }],
  height: 200 }));

Options

grid
A CSS grid of .sm cards (auto-fill, minimum 180px) so it reflows from 1 column to many.
card
Name, latest value, and spark(values, { w: 150, h: 36 }) in a <button class='c'> with aria-pressed.
detail
A lineChart for the selected card, redrawn on click.