SVG Sparkline

Sparklines: word-sized graphics for dense dashboards

The term sparkline was coined by Edward Tufte in Beautiful Evidence (2006), where he defined them as "data-intense, design-simple, word-sized graphics". The idea is to embed a tiny chart inline with text — typically 16–50 pixels tall — so the reader catches a trend without breaking the reading flow. Bloomberg Terminal, Yahoo Finance, GitHub's contribution calendar (a mini variant) and most modern SaaS dashboards rely on sparklines to summarize KPI history at a glance.

The SVG implementation is straightforward: a single <polyline> takes a list of x,y points scaled into the viewBox. The data is normalized by mapping the array's min/max to the available pixel range. A finished sparkline is usually under 500 bytes, which means a page can carry hundreds of them without performance regressions.

<svg viewBox="0 0 100 30" width="100" height="30">
  <polyline points="0,15 10,5 20,25 30,10 40,18 50,7 60,12"
            fill="none" stroke="#10b981" stroke-width="2"/>
</svg>

Variants and annotations

Beyond the default line, the format covers bar (mini histogram), area (filled below the line) and win/loss (red/green ticks for binary outcomes). Useful annotations include a larger circle on the last point (current value), a red dot on the minimum and a green dot on the maximum. These are the same conventions Tufte showcased and that Excel adopted natively in 2010.

Libraries and ecosystem

Popular implementations include peity.js (Ben Pickles, jQuery), react-sparklines (Borja Tarraso), the sparkline npm package and the Chart.js sparkline plugin. Datawrapper generates sparklines automatically from tabular data, and Observable HQ ships them as first-class cells. For a static SVG, rolling your own — like this generator does — keeps the bundle clean and avoids runtime dependencies.

Sparkline vs full chart

A sparkline is 16–50 px tall; a full chart is 300–500 px. Use a sparkline when the goal is context summary (trend direction, recent volatility) next to a primary metric — for example, a KPI card showing "$ 12,400 ▁▂▅▇" — and reserve full charts for drill-down screens. The Bloomberg ticker line in financial news combines both: a price number, a percent change, and a sparkline of the intraday curve.

FAQ

Should green always mean "up" and red "down"? It is the financial convention, but it fails for the ~8% of men with red–green colorblindness. Pair color with shape (arrow, dot) or use a colorblind-safe palette such as orange/blue.

How many data points work best? Between 10 and 30. Fewer than 10 looks noisy; more than 30 turns the line into a blur at sparkline sizes. Aggregate (daily average, hourly bucket) before plotting if the source series is denser.

Can I add a tooltip on hover? Yes. Wrap each point in a <circle> with a <title> child for native browser tooltips, or attach JS listeners for a richer popover. Keep it optional — sparklines are meant to be readable without interaction.

Is the SVG accessible? Add an aria-label summarizing the trend, e.g. aria-label="Sales last 7 days, trending up 14%", so screen readers convey the insight even without seeing the line.