Sparkline generator — tiny trend charts for tables and reports

How to use the sparkline generator

1. Paste or type your values into Numbers, oldest first.
2. Pick a Style: Line or Columns.
3. For a line, choose whether to Fill under the line and Mark the last value. For either style, choose Mark the minimum and maximum.
4. Set the Colour, Width (40–1,200 px), Height (12–400 px) and Background.
5. Copy the SVG or download sparkline.svg. The stats show the last value, change, minimum, maximum and how many values were read.

What it does and when to use it

Sparklines were made for dense displays: a column of weekly sales in a report, a share price beside a company name, the last twelve readings next to a KPI. The small picture answers “is this going up or down, and is it steady?” in the space of a word.

The SVG has a fixed pixel size and no text, so it drops straight into a document or web page; pick Transparent as the Background for coloured cards. For a single headline number against a goal, a gauge chart is clearer. For a full chart with axes and labels, use the line chart maker or the bar chart maker.

How it works

In the Line style the points are spaced evenly across the width, and the vertical range runs from your smallest value to your largest, with a few pixels of padding so markers are not clipped. The fill under the line is the same colour at 18% opacity. In the Columns style the range always includes zero: positive columns rise from a zero baseline and negative ones hang below it in red.

The SVG has a <desc> such as “Sparkline of 12 values from 12 to 33; minimum 12, maximum 33” for screen readers. Everything is drawn in your browser.

Worked examples

Steady growth (the sample). Twelve values from 12 to 33 give:

Last value: 33
Change: 175%
Minimum: 12
Maximum: 33
Values: 12

Gains and losses as columns. 5 -3 8 -1 in the Columns style draws two columns above zero and two red ones below. The stats show Minimum: -3, Maximum: 8 and a change of -120%.

A body temperature log. Six readings from 98.6 to 99.0 in red at 120 × 30 px. The line climbs to 101.2 and falls back, but the change from first to last is only Change: 0.41%. The shape shows the fever; the percentage alone would hide it.

Limits and tips

• There are no axis labels, so put the actual latest number next to the sparkline when you use it.
• Use one width and height for every sparkline in a table.
• For a PNG, run the SVG through the SVG to PNG converter.