Recipe
Sparkline design
Tiny inline charts that communicate trend at a glance without axes, labels, or chrome.
Anatomy
20 data points, 1.5px bars, no grid
Variants
Line sparkline
Area sparkline
Guidelines
- Remove all chrome — no axes, ticks, labels, or legends.
- Use a single accent color. The shape alone carries the signal.
- Keep height under 40px. Sparklines live inline with text or table cells.
- Highlight the last value with a dot or brighter color for context.
Pro tip: Pair a sparkline with a single numeric value — the sparkline shows trend, the number shows precision.