Sparkline Design

Sparkline design, inline data visualization, and small multiples.

dragoon0x 33cb20e 944 B Updated

File contents

Sparklines & Small Multiples

Sparklines

Tiny charts embedded in text, tables, or KPI cards. Edward Tufte's invention.

  • No axes, no labels, no gridlines
  • Show shape/trend only
  • Width: 80-150px, height: 20-40px
  • Highlight: min, max, latest value, or trend direction
  • Color: single color, or green/red for positive/negative

Where to Use

  • KPI cards (trend line below the number)
  • Table cells (showing each row's trend)
  • Inline in text (stock price mention with visual)
  • Dashboard headers (context for the primary metric)

Small Multiples

Same chart repeated for different segments, enabling comparison.

  • Same scale across all multiples (critical for fair comparison)
  • Same dimensions and axes
  • Sorted meaningfully (alphabetical, by value, by trend)
  • Grid layout (3-4 columns)
  • Label each clearly but minimally

dragoon0x/everything-design-taste/tree/main/skills/sparkline-design commit 33cb20ecb0

Frequently asked questions

npx skillmds@latest add dragoon0x/sparkline-design