U7.03.3A sparkline can add the time dimensiondesign

A tiny sparkline next to a number can show the recent shape of a trend at almost no cost

Aliases: sparkline · micro chart

What it is

The baseline and direction answer "how does it compare to a point"; a sparkline answers "how has the recent stretch actually gone": one axis-less miniature line lets the metric card carry temporal shape at nearly unchanged footprint — steady climb, high-level chop, or a fresh cliff. It is the third layer of context beyond "current value plus direction," and the only cheap way to tell "fluctuation" from "trend."

Why it happens

A sparkline supplies the shape of change: direction and magnitude are a two-point summary (now versus baseline), and two points lie — the same "+5%" means different things climbing steadily versus rebounding after a fall from a peak; the sparkline's full trajectory eliminates that ambiguity. Its design points all serve "shape readability": no axes or ticks (space saved, shape is the message), a fixed time window labelled on hover (readers know how long they are looking at), the endpoint tied to the current value (line and number corroborate), and optionally a reference band (such as the normal range). The cost is tiny (tens of pixels wide), making the sparkline the highest-return investment in a metric card's information density.

Where it stops holding

A sparkline's shape is doubly hostage to window and scaling: the same data draws different shapes in different windows, and an unnormalised vertical axis exaggerates or flattens volatility — all sparklines on one screen should share window and scaling rules, or the cards are not comparable. Sparklines also support shape judgement only, not reading — axis-less lines cannot be read for values, so value-reading scenarios need an axis or a tooltip. Noisy metrics (hourly jitter in daily actives) should be smoothed or aggregated before drawing, or the sparkline is just a miniature of the noise.

Applying it

  • Standard-equip metric cards with sparklines: axis-less, fixed window, endpoint tied to the current value, window length labelled on hover.
  • Unify window and scaling rules across all sparklines on one screen so they stay mutually comparable.
  • Verification: ask readers to judge "rising, falling, or choppy lately" from sparklines alone and check against full charts; low accuracy means window or scaling settings are wrong.

Related

  • Same group: U7.03.1 A single number lacks context · U7.03.2 Comparison baseline and direction of change are required
  • Nearby: U2.03.1 Line charts suit trends over ordered variables · U7.09.2 Update frequency must match decision frequency
  • Search terms: sparkline · small trend · metric card pattern

Cards in the same group

Quick Actions

Share

Share this page

ios_share

https://hci.top/en/handbook/U7.03.3