Chart 8 of 15

Sparkline

Use it beside a number to show direction at a glance. It has no scale on purpose, so always print the figure next to it and never use it to compare exact values.

Live demo

Made-up data. Try the options, then switch to the empty and one-point states.

Sparklines are labelled images with a plain-English summary for screen readers; the number beside them is the data.

How to use it

JavaScript
row.append(
  spark(values, {
    w: 120, h: 32,
    label: 'Groceries over 12 months, from £402 to £455'
  })
);

// columns instead of a line, wider
spark(values, { w: 260, h: 40, bars: true, label: '...' });

Options

values
Array of numbers. Fewer than 2 draws nothing (a dash for none).
w, h
Size in SVG units (default 120 × 32).
bars
true draws columns, with the latest one highlighted.
fluid
true makes the svg 100% wide (set w to the width you expect).
label
aria-label, e.g. a sentence describing the trend.