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

The sparkline is a chart with everything removed except the data line. No axes, no labels, no legend, no title. Tufte introduced the form in Beautiful Evidence (2006) as a small, intense, word-sized graphic: a chart that lives at the resolution of typography, embedded in running text or a table cell, designed to be read at the same scale and pace as the surrounding numbers.

That definition matters. A sparkline is not a small line chart. It is a different kind of object: a glyph that conveys shape, direction, and a final state, at a size where individual points are no longer perceptible. It belongs with a number, not in place of one.

What it is

A sparkline is a tiny, axis-less line (or bar, or area) chart designed to be embedded inline. It typically occupies the height of a line of text and a small horizontal span — 100 to 200 pixels is canonical. It shows the shape and direction of a series; it does not show specific values. When a value is needed, it is placed beside the sparkline as a paired number.

The hero chart above is ninety days of daily sessions drawn with nothing but the line, a dashed rule at the ninety-day median, and the latest value printed at the end. It is deliberately shallower than the other heroes in this index, because height is the form's whole argument. The chart does not tell you the sessions on any particular Tuesday; it tells you the weekly rhythm, the slow climb, and that the series ended above its own median. Randomise it and the shape jitters, but the reading — up, rhythmic, currently above normal — survives, which is exactly the kind of reading a sparkline is built for.

When to use it

Sparklines are the right choice when:

  • You need to show many series at once — a table of metrics with one sparkline per row, a dashboard of fifty KPIs, a status board.
  • The reader's question is "is this going up or down?" rather than "what is the exact value?"
  • The chart needs to sit inline with text or numbers — in a sentence, a table cell, a status line.
  • You have dense longitudinal data — 30 to 200 points is the sweet spot; less and the line is barely a glyph, more and details collapse.
  • The paired number carries the precise value; the sparkline carries the shape.

The four figures below are the form in its natural habitat: a column of operational metrics, each at 72 pixels, each ending in the number the reader actually needs.

API latency, p95 · last 60 days · ms
Error rate · last 60 days · %
Requests per second · last 60 days
Daily sign-ups · last 60 days · dashed rule is the target of 180
The same glyph with a baseline. The reader no longer has to remember what normal is: the rule says it, and the line's relationship to it is the message.

When not to use it

  • As a standalone chart. Embedded is the form's reason for being. A sparkline blown up to fill a card is just a poorly-decorated line chart.
  • When precise values matter. No axes means no readable values. If the reader needs to know 2,418 vs. 2,394, use a table cell with the numbers.
  • For sparse data. 5 points does not make a glyph; it makes a connect-the-dots. Use a slope chart or a dot plot.
  • For comparison between series with very different scales. A 90-day series of revenue and a 90-day series of churn rate, both as sparklines of equal height, suggest comparable magnitudes when their scales differ by orders of magnitude.
Six quarterly readings as a sparkline
Six points are not enough to make a shape. The line is a sequence of corners, and the eye reads each corner as an event. This wants to be a dot plot or a small line chart with its points showing.

Design principles

Strip everything

No axes, no gridlines, no tick marks, no legend. The line, perhaps the endpoint marker, perhaps a high/low band. That is the entire chart. Anything else competes with the data at a scale where there is no room to compete. The two figures below are the same thirty days of latency: first as a line chart with its full scaffolding, then reduced to the glyph. The scaffolding is what lets the reader look up a value; the glyph is what lets them see a shape at a glance. The sparkline does not try to do both.

The same series with axes, grid and points
A conventional line chart. Every day can be read off the axes, and the scaffolding takes three-quarters of the ink and 260 pixels of height to make that possible.
The same series as a sparkline
Seventy-two pixels. Nothing can be read off it except the shape, the direction, and the last value — which is exactly the set of things a status row needs.

Pair with the latest value

The number sits to the right of the sparkline at the same baseline, separated by a thin space. The reader scans down a column of sparklines and the eye reads shape; scans the values column and the eye reads numbers. Two columns, one reading task. The renderer used throughout this page prints the last value beside the endpoint dot for exactly this reason.

Mark the high and low

Two small dots — one at the maximum, one at the minimum — give the reader a sense of range without an axis. Tufte's Beautiful Evidence shows these as red and blue dots; the house style uses a single accent dot for the latest value and, where the tooling allows, lighter dots for the extremes. Where it does not, the normal-range band below does the same job.

Show the normal-range band

Tufte's refinement: a horizontal grey band showing the expected operating range. The eye reads whether the line is currently inside or outside normal without computing means or standard deviations. This is especially valuable in operational dashboards: at a glance, you see whether something is within tolerance. The sparkline renderer draws a single baseline rule rather than a band; the two figures below show the difference that one rule makes.

Queue depth without a reference
Is 41 good? The shape says the queue has been climbing for a fortnight, but nothing on the glyph says whether that matters.
Queue depth with the alert threshold of 35
The same series with the threshold drawn. The last fortnight is now legible as a breach, not a slope. A rule is the cheapest context a sparkline can carry.

Keep the height constant across rows

In a table of sparklines, each row's chart must be the same height for the eye to compare shapes. Different heights would imply different scales. The y-axis is implied to be the same across rows; honour that. Every sparkline on this page is 72 pixels for the same reason.

Do not embed too much

A sparkline can carry shape and direction. It cannot carry seasonality decomposed by component, multiple overlapping series, or confidence bands. If you find yourself adding more than two visual elements, you have outgrown the form. Use a small line chart instead.

Three regions on one sparkline
Three series at 72 pixels. The lines cross, the endpoint values collide, and the reader cannot tell which is which without a legend the form refuses to carry. This is three sparklines, or one small multiple.

Use sparingly in prose

Tufte demonstrates sparklines mid-sentence: the patient's pulse and temperature. In editorial writing, one or two inline sparklines per page is a lovely effect; ten is noise. The same restraint applies as for any decorative typographic element.

Anatomy

The composition of a sparkline
An anatomical guide. The form is drawn taller here than it should ever be used, so that its few parts can be named.

The sparkline's anatomy is the line plus its companions: the row label, the endpoint marker, the latest value, and (optionally) a baseline rule and a delta indicator. The chart succeeds when these read together as a single horizontal unit.

  • Line chart — the larger, axis-bearing form. Use when precise values matter and there is room for axes.
  • Bullet chart — a different inline indicator: actual value, target, normal-range bands. Better for goal-tracking than trend.
  • Spark bar / spark column — sparkline grammar applied to bars. Good for discrete period-over-period change.
  • Win-loss spark — a binary version showing a sequence of up/down marks. Used in finance for daily gains/losses.
  • Trend ribbon — a stylised continuation of the sparkline idea for editorial dashboards (Datashow's own design).

Reading list

  • Tufte, E. (2006). Beautiful Evidence. The chapter introducing the sparkline.
  • Few, S. (2006). Information Dashboard Design. Sparklines applied to operational dashboards.
  • Heer, J., Kong, N. & Agrawala, M. (2009). Sizing the Horizon. Empirical work on small-multiple time-series displays.