Charts

Sparkline Generator

A small inline trend line sized to sit in a table cell, with high, low and latest marked.

Loading the tool…

Processing happens locally in your browser. What you paste or load is processed by this page and is not uploaded to a server. Nothing is stored unless you use a control that says it stores something, and you can clear anything this site has kept from the privacy page.

How to use this tool

  1. Paste the series you want to summarise — a row of numbers or a column, either works.
  2. Set the width to match the space it has to sit in. Around 120 pixels suits a table cell; 240 suits a dashboard tile.
  3. Select Draw the sparkline.
  4. Paste the SVG straight into your HTML. It carries no script and loads nothing, so it works inside a README or an email template.

What sparkline generator does

A sparkline is a chart small enough to sit inside a sentence or a table cell. It deliberately drops the axes, the gridlines and the labels, because its job is not to let you read a value — the number is right next to it — but to show whether that number arrived by climbing, falling or bouncing.

Paste a series of numbers and this draws one at whatever width you set, marking the high, the low and the latest point. The output is a self-contained SVG you can paste straight into a dashboard cell, a status page or a README, with no script and no request to anything. It is the right chart for a column of eighty rows, where eighty full charts would be unreadable.

Frequently asked questions

Because it is meant to sit beside the number it describes, not replace it. The value is already there in the cell; what the sparkline adds is the shape of how that value arrived. Adding axes would make it a small chart rather than a rich piece of typography, and it would no longer fit where it needs to fit.

Yes. It is a self-contained element with no script, no external reference and no request to anything, so it can be inlined in a page, a README, a dashboard cell or an email template. Because it is inline SVG rather than an image file, it also scales with the surrounding text.

The highest point, the lowest point and the most recent one. Those three are what people actually look for in a trend at a glance — where it topped out, where it bottomed out, and where it is now — and marking them means the line does not have to be read carefully to be useful.

As many as you paste, though the useful range is roughly twenty to two hundred. Below that a plain list of numbers says more; far above it, at the width a sparkline occupies, the line becomes a solid band. If you have thousands of points, average them into buckets first and chart the buckets.