This entry is part of the Chart Index, the reference library for the Chart Design Field Guide.

The trend ribbon is Datashow's own design — a stylised hybrid of the sparkline, the bullet chart, and the range plot. Where a sparkline shows trajectory alone and a bullet shows position-against-target alone, the trend ribbon shows both: the current value, its position within a recent range, and the trajectory that brought it there. It is the chart we reach for when a dashboard row needs to answer where are we, where are we going, and is that good?

The form is deliberately small. It lives at the height of a table row, packs three encodings into one strip, and supports dense KPI displays where space is the binding constraint. Like the sparkline, it is designed to be read at a glance and accompanied by a paired numeric value.

What it is

A trend ribbon maps a time dimension to horizontal position, a quantitative value to vertical position, and a recent normal range to a shaded band along the value axis. The current value is a prominent dot; the recent history is a thin line; the normal range is a faint background ribbon. The result is a strip about 80 × 200 pixels that conveys current, recent past, and contextual range together.

Operational KPIs — current state8 metrics · 30-day window · normal range = ±1σ

Eight KPIs as ribbons stacked vertically. The eye reads the dot's position within the band (above range, within, below), the recent line's direction (climbing, flat, falling), and the paired number for precision. Across a column of ribbons, anomalies — metrics outside their bands — pop visually.

When to use it

Trend ribbons are the right choice when:

  • You need to track multiple operational KPIs at a glance — a status dashboard, a daily standup view.
  • The reader's question is "where am I, where am I going, and is that normal?"
  • You have rolling normal ranges — historical statistics that define what counts as expected.
  • You want denser displays than bullets allow — ribbons combine three encodings in the same space.
  • The display is frequently consulted — the form rewards familiarity.

When not to use it

  • Single-metric display. A solo ribbon underperforms a richer chart. The form's value is in dense multi-metric arrays.
  • No notion of normal. Without a meaningful range band, the ribbon collapses to a sparkline with a dot.
  • High-precision reading. The strip's small size limits value-reading precision. Pair with a numeric column always.
  • Unfamiliar audiences. The three encodings need a brief orientation. Bullet charts or sparklines may be easier for occasional users.

Design principles

Make the range band the quietest layer

The band sits behind everything else. Use a faint fill (8–15% opacity of a neutral tone) so it contextualises without competing. The eye should perceive it as background, not as data.

Make the trajectory line a clean stroke

The recent-history line uses a single accent or neutral colour, weight 1–1.5 pixels. It is thinner than the dot but thicker than the band. The reader reads the line for direction, not for individual points.

Make the current dot the loudest element

The dot is what the reader is looking for: the now. Make it 6–8 pixels, full accent colour, with optional outline. Whatever else is on the strip, the dot should be the first thing the eye lands on.

Trend ribbon construction — three layers
BAND ONLYBAND + LINEFULL RIBBON
The faint band carries the normal range; the line shows recent trajectory; the dot is the current value. Stacked, the layers form a single readable strip.

Pair every ribbon with a numeric column

Like the sparkline, the ribbon does not carry precise values. The companion column — current value, delta against the previous period — is the half of the chart that handles precision. Together they make a complete row.

Use a consistent vertical scale across rows

Each ribbon's band sets its own scale per metric — that is fine. But within a row, the ribbon strip height is constant. The eye reads shape consistency across metrics; varying heights would imply varying importance.

Encode out-of-range conditions visually

If the dot falls outside the band, change its colour to a warning tone (a desaturated red or amber). The reader can scan a column of ribbons and see anomalies at a glance without reading individual values.

Resist adding more layers

The form's strength is its three-layer simplicity. Adding a forecast cone, a second metric line, or annotations turns the ribbon into a chart that wants to be a panel. Let it be small and decisive.

Anatomy

The Composition of a Trend Ribbon
Revenue$4.2m+8.2%Conversion3.4%+0.2ppLatency p95112 ms+18%Error rate0.21%−12%DAU22.5k+3.4%FAINT NORMAL-RANGE BANDRECENT-HISTORY LINECURRENT DOT — ANOMALOUS
An anatomical guide

A trend ribbon's anatomy is three superimposed layers — band, line, dot — with a paired numeric column. The form is small, dense, and built for repetition.

  • Sparkline — the trend ribbon without the band. Trajectory and current value only.
  • Bullet chart — current value vs. target with bands. Different question — am I on target? not am I trending well within normal?.
  • Range plot — emphasises the from-to band, not the dot.
  • Confidence-band line chart — large-format version of the same three encodings, full panel size.
  • Status badge with sparkline — a competing minimal form for dashboards.

Reading list

  • Tufte, E. (2006). Beautiful Evidence. On sparklines and inline indicators.
  • Few, S. (2006). Information Dashboard Design. The conceptual foundation for dense operational displays.
  • Datashow internal design notes (2025). The trend ribbon: a synthesis of sparkline, bullet, and range plot.