Sparkline
A tiny, word-sized chart embedded inline with text or data — showing the general shape of a trend without axes, labels, or gridlines.
// 01 — The chart
What it looks like
Three sparklines embedded alongside product names and current values. Product A trends up, B trends down, and C is stable.
// 02 — Definition
What is a sparkline?
A sparkline is a small, intense, simple, word-sized graphic with typographic resolution. Coined and popularised by Edward Tufte in his 2006 book Beautiful Evidence, sparklines are designed to be embedded inline — within a sentence, a table cell, or a dashboard KPI — rather than standing alone as a separate chart.
Sparklines strip away everything except the data line itself: no axes, no labels, no gridlines, no legend. What remains is the pure shape of the data — its trend, its variability, its peaks and valleys. This radical minimalism lets you place dozens of sparklines side by side for rapid comparison.
The most common sparkline is a simple line sparkline, but bar sparklines (win/loss charts) and area sparklines also exist. Despite their simplicity, sparklines are one of the most data-dense visualizations per pixel.
Key insight: Sparklines are not meant to replace full-sized charts. They answer a different question: “What is the general trend?” rather than “What is the exact value at point X?”
// 03 — Anatomy
Parts of a sparkline
// 04 — Usage
When to use it — and when not to
- Embedding a trend inline with text, a table, or a KPI dashboard
- Comparing the shape of many time series at a glance
- Space is limited and you need maximum data density
- The general direction (up, down, flat) matters more than exact values
- Providing context for a single summary number
- You need to read precise values — sparklines have no axes or labels
- The audience needs to identify specific dates or events in the data
- You only have 2–3 data points — not enough to show a meaningful shape
- Comparing absolute magnitudes between series — sparklines are independently scaled
- Data contains important outliers that need labelled context
// 05 — Reading guide
How to read a sparkline
Sparklines are designed for instant comprehension. Here is what to look for.
Read the overall slope
Is the line going up, going down, or staying flat from left to right? This tells you the primary trend over the period.
Notice the variability
Is the line smooth or jagged? High variability (lots of spikes) means the data fluctuates significantly, while a smooth line suggests stability.
Spot peaks and valleys
The highest and lowest points in the sparkline represent the maximum and minimum values. Some implementations highlight these with coloured dots.
Compare start and end
If start and end markers are present, quickly compare where the series began versus where it ended. This gives the net change at a glance.
Compare across rows
When sparklines are stacked in a table, scan vertically to find which rows share similar patterns and which are outliers.
// 06 — Data format
What data you need
A sparkline needs just a single ordered sequence of numeric values. No time labels or axis values are required — only the relative positions matter. Typically you need at least 5–10 data points to form a recognisable shape.
// 07 — Construction
How to build one
Step 1: Determine the data range (min and max) for each sparkline. Decide whether all sparklines share the same scale or are independently scaled.
Step 2: Map each value to a y-coordinate within the sparkline’s tiny height (typically 16–30 pixels). Space x-coordinates evenly across the width.
Step 3: Draw a single polyline or path connecting all the points. Use rounded line joins for a smoother look.
Step 4: Optionally add start/end dots, a min/max marker, or a subtle fill beneath the line. Keep embellishments minimal — the whole point is simplicity.
// 08 — Common mistakes
Mistakes to avoid
Making them too large
A sparkline that takes up a full chart’s worth of space defeats the purpose. Keep them word-sized — roughly the height of a line of text.
Adding axes and labels
Sparklines are defined by the absence of chart furniture. If you need axes, use a regular line chart instead.
Inconsistent scales across a table
When comparing sparklines in a table, using different y-scales for each row makes visual comparison misleading. Decide on shared or independent scales and communicate the choice.
Too few data points
With only 2–3 points, a sparkline collapses to a straight line and provides no insight beyond ‘up’ or ‘down’. Aim for at least 5–10 values.
// 09 — Real-world examples
Where you’ll see them
Stock tickers and financial dashboards
Every financial app shows sparklines next to stock symbols — a tiny line showing today’s price movement at a glance.
Fitness trackers
Wearable devices and health apps use sparklines to show daily step counts, heart rate, or sleep quality over the past week.
Server monitoring dashboards
Tools like Grafana and Datadog embed sparklines in tables of services, showing CPU, memory, or error rate trends per host.
// 10 — Quick reference
Key facts
// 11 — Accessibility
Making it accessible
Sparklines are purely visual, so always provide a text alternative. Use an aria-label or title element on the SVG describing the trend (e.g., “Rising trend from 22k to 48k over 12 months”). When sparklines appear in tables, ensure the adjacent cells contain the numeric data so screen readers can convey the same information. Use sufficient stroke contrast against the background.
// 12 — Variations
Common variations
Line sparkline
The classic form — a simple polyline encoding a continuous time series.
Area sparkline
Adds a subtle fill beneath the line, emphasising volume or magnitude.
Bar sparkline (win/loss)
Tiny vertical bars showing discrete values — often used for win/loss records in sports.
Band sparkline
Adds a shaded reference band (e.g., normal range) behind the line to show when values are above or below a threshold.
// 13 — FAQs
Frequently asked questions
What is a sparkline?+
A sparkline is a small, intense, simple, word-sized graphic with typographic resolution. Coined and popularised by Edward Tufte in his 2006 book Beautiful Evidence, sparklines are designed to be embedded inline — within a sentence, a table cell, or a dashboard KPI — rather than standing alone as a separate chart.
When should you use a sparkline?+
Use a sparkline when embedding a trend inline with text, a table, or a KPI dashboard. It also works well when comparing the shape of many time series at a glance, and when space is limited and you need maximum data density.
When should you avoid a sparkline?+
Avoid a sparkline when you need to read precise values — sparklines have no axes or labels. It is also a poor fit when the audience needs to identify specific dates or events in the data, or when you only have 2–3 data points — not enough to show a meaningful shape.
What data do you need to make a sparkline?+
A sparkline needs just a single ordered sequence of numeric values. No time labels or axis values are required — only the relative positions matter. Typically you need at least 5–10 data points to form a recognisable shape.
How is a sparkline different from a line graph?+
Both a sparkline and a line graph can look similar at first glance, but they answer different questions. Reach for a sparkline when the comparisons and patterns it was designed to reveal match what you need to communicate, and choose a line graph when its particular strengths better fit your data and audience.
What is another name for a sparkline?+
Sparkline is also known as Micro chart, inline chart, word-sized graphic. The name varies between fields, but the visualisation technique is the same.
What size of dataset works best for a sparkline?+
Sparkline works best for Tables, dashboards, KPI summaries. Outside that range the chart either looks empty or becomes too cluttered to read clearly.
Are sparklines accessible to screen readers?+
Sparklines are purely visual, so always provide a text alternative. Use an aria-label or title element on the SVG describing the trend (e.g., "Rising trend from 22k to 48k over 12 months"). When sparklines appear in tables, ensure the adjacent cells contain the numeric data so screen readers can convey the same information. Use sufficient stroke contrast against the background.