Sparkline Generator

How the Sparkline Generator works

Sparkline generator: entering the numbers

Type or paste the values in order, separated by commas, spaces or new lines; a column copied from a spreadsheet works as it is. Percent and currency signs are stripped. Two values is the minimum, and the sparkline stays sharp for a few hundred because the SVG scales to the width you set rather than one pixel per point.

Types

Line joins the points with straight segments; Smooth line rounds the corners with a monotone curve that never overshoots. Area fills under the line at low opacity, which reads better on a busy page. Bars draws one column per value from zero, so negatives hang below the baseline. Win/loss ignores the size of each value and draws an up tick for positive and a down tick for negative, the classic form for a sequence of results or daily gains and losses.

Size and markers

Width and height are the pixel size of the SVG itself, so 120 by 30 gives a file that drops into a table row at its natural size. The preview is scaled up so you can see the shape; the downloaded file is the true size. Markers add a dot on the last point, on the minimum and maximum, or all three, in the palette colours. Line width is in pixels at the true size.

Embedding

Copy SVG puts the markup on the clipboard; paste it straight into an HTML page, a Markdown file that allows inline SVG, or a component. Because there is no text inside, it needs no fonts and scales cleanly. Choose the Transparent background so the sparkline takes the colour of whatever sits behind it, or White when it will be placed on a photograph or dark panel. Download PNG renders it at one, two or three times the set size for email clients and documents that do not accept SVG.

Stats

The panel gives the count, minimum, maximum, last value, the change from first to last and the pixel size of the file, which is what you would print alongside the sparkline in a table: the chart shows the shape, the number gives the scale.

Related tools