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 an expected 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 normal?

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 time to horizontal position, a quantitative value to vertical position, and an expected range to one or more tinted bands that follow the line. The current value is a prominent dot; the recent history is a line; the expected range is the band beneath it. The bands are not grey: each is the series colour mixed toward the page at a fixed ratio, so a row reads as one object in one hue, and the dot changes to the alert red only when the value leaves the widest band.

The hero chart above is sixteen weeks of sign-ups against two bands built from the previous year — the P10–P90 envelope on the outside, the P25–P75 envelope inside it. For fifteen weeks the line wanders inside the tints, mostly within the inner one. In the sixteenth it climbs clear of the outer band, and the current dot turns red. That colour change is the entire alerting mechanism: nothing else on the chart moves. Randomise it and every point is rescaled with its own bands, so the line stays inside its range except where the data put it outside.

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 stand-up 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

Build the ribbon in three layers

The form is a sparkline with two things added, and it helps to see them arrive one at a time. The three figures below are the same twelve weeks of checkout conversion: first the bare trajectory, then the trajectory inside its expected range, then the same with a second, tighter band nested inside the first.

Layer one: the trajectory
A sparkline. The reader sees a shape and a last value, and has no way of knowing whether 3.65% is ordinary or alarming.
Layer two: the expected range
The same line inside its P10–P90 envelope from the previous year. The band is a tint of the line's own colour, so the row still reads as one object; the last value is now legible as comfortably normal.
Layer three: a nested inner band
A second band, P25–P75, nested inside the first. Bands are given widest first and each step inward is a stronger tint of the same hue, so the eye reads the nest as one gradient rather than two rules.

Make the range band the quietest layer

The band sits behind everything else. In the house implementation it is not a grey wash but the series colour mixed toward the page — about a third of the way for the innermost band, and each band outward at forty per cent of the ratio of the one inside it — and drawn translucent, so gridlines and neighbouring marks still read through. Two things follow. The band never needs its own colour, which keeps the row to one hue. And adding an interval makes the outer bands fainter rather than the inner one heavier, so the mass at the centre — the part the reader is actually looking at — keeps its weight. Three nested bands still read as background.

Three nested bands: P5–P95, P10–P90, P25–P75
The outermost band is barely there, the innermost is a clear tint, and the line sits on top of all three. The gridlines are still visible through the stack, which is the test of whether a band has stayed context rather than become a panel.

Make the trajectory line a clean stroke

The recent-history line uses the series colour at full strength — it is the anchor the bands are mixed from, so it cannot be darkened or lightened without the bands ceasing to be tints of it. Keep the weight modest, 2 to 2.5 pixels, and the curve gentle. 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. It is the largest mark on the strip, filled in the series colour when the value is inside the widest band and in the alert red when it is outside. Whatever else is on the strip, the dot should be the first thing the eye lands on.

Encode out-of-range conditions visually

The colour change is the alert. A reader scanning a column of ribbons does not read any values; they look for the red dots. The two figures below are identical apart from the final week.

Inside the range: the dot keeps the series colour
Latency ends the fortnight at 118 ms, within its P10–P90 band. Nothing to see, and the ribbon says so by staying one colour.
Outside the range: the dot turns red
The same fortnight with a bad final day. The value has left the widest band, and the current dot switches to the alert colour. The band, the line and the axes are untouched; one mark carries the alarm.

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 dashboard, the strip height is constant. The eye reads shape consistency across metrics; varying heights would imply varying importance. The figure below is the form at the height it is meant to live at.

A ribbon at row height
One hundred and twenty pixels, no axis captions, one band. Two or three of these stacked, each with a value beside it, is the dashboard row the form was designed for.

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. Two series on one ribbon is the commonest temptation, and the figure below shows why it fails: the bands overlap, the tints mix into a third colour, and neither dot can be read against its own range.

Two metrics on one ribbon
Web and app conversion with their own bands on one pair of axes. Where the bands overlap the tints add up to a muddy brown, and the reader has to work out which band each dot is supposed to be judged against. These are two ribbons, one above the other.

Anatomy

The composition of a trend ribbon
An anatomical guide

A trend ribbon's anatomy is three superimposed layers — band, line, dot — with a paired numeric column. The bands are tints of the line, the dot is the alarm, and 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.
  • Wilke, C. (2019). Fundamentals of Data Visualization. The chapter on visualising uncertainty, including confidence bands around a trend.