Home/ Cookbook/ Charts/ Sparkline

Sparkline (KPI inline)

A tiny 60×24 line with no axes that lives inside a KPI tile — the trend chip that lets a number tell two stories at once: how big, and which way it's heading.

Charts · 11 of 20 1 primitive · Chart.Sparkline ~10 min React · @corelithzw/react

Overview

What it is, when you'd reach for it, and when you wouldn't.

A sparkline is a chart with everything stripped out except the line. No axes, no gridlines, no labels — just a 60-pixel-wide trace next to a number. The number tells you how big; the sparkline tells you how we got here. Inside a KPI tile, on a row card, in a table cell — anywhere a single trend belongs but a full chart would overwhelm.

Reach for it when you have 7–60 data points and the shape of the trend matters more than any single value. Skip it if exact numbers matter (the user can't read tick values); use a bar chart with labels instead. Also skip if the series is shorter than 4 points — at that size, two number deltas tell the same story with less ink.

The opinion: a sparkline without a baseline number above it is just decoration. Always pair it with the figure it explains, and use colour to encode direction — green for up-is-good, red for up-is-bad.

The chart

14 daily revenue points, rendered at the size you'd actually ship — small enough to sit beside a 24-pixel number.

Revenue · 14d
$ 4,820
Revenue · 14 days Daily revenue rising from $3,200 to $4,820 across 14 days.
+18% vs. prior 14d

Required pieces

One named export from @corelithzw/react. The KPI tile around it is just a Card.

PrimitiveChart.Sparkline BlockStat card BlockRow card
Roadmap: Chart.Sparkline ships in v0.2. In v0.1-alpha, drop the inline SVG below into your KPI tile — the API is intentionally identical so the swap is a 4-line diff when the component lands.

React snippet

Minimal API: data as a number array, an explicit tone, the rest is opinionated defaults.

Revenue · 14d
$ 4,820
+18% vs. prior 14d
Chart.Sparkline@corelithzw/react

Customising

Three forks. Each is a 6-line diff from the snippet above.

Bar sparkline

For discrete-bucket trends — pours per day, tickets per hour — bars read more honestly than a smoothed line.

<Chart.Sparkline
  data={pours}
  variant="bar"
  tone="brand"
  width={160}
  height={40}
/>

Win/loss sparkline

Up-or-down ticks anchored to a baseline. Use for binary outcomes — wins vs. losses, on-time vs. late.

<Chart.Sparkline
  data={wins}
  variant="winloss"
  baseline={0}
  width={160}
  height={24}
/>

With min/max markers

Dot the high and low so the user can read the range without an axis. Skip the area fill — it competes with the dots.

<Chart.Sparkline
  data={latency}
  tone="danger"
  markers="extrema"
  area={false}
  width={160}
/>

In context

Three sparklines in a row of KPI tiles. The trend is the second-class citizen — the number leads.

Revenue · 14d
$ 4,820
+18%
Orders · 14d
128
−6%
Cash on hand
$ 12,940
+2%

Accessibility

Sparklines are the hardest chart to make accessible because they're small — and they're often used to convey direction by colour alone. Every item below is mandatory.

  • Every sparkline is role="img". Even though the SVG is the size of a glyph, screen readers must treat it as a single image with a meaning, not 14 invisible polygons.
  • The aria-label summarises the trend. "Revenue up 18% across 14 days" — direction, magnitude, span. Not "Sparkline chart".
  • Direction is never colour-only. The delta text below (+18% / −6%) carries the same information. A monochrome screen reads the same story.
  • The data is in a hidden <table>. Sparklines are sketches; users who need the numbers get a real table with sr-only wrapping.
  • No tooltip-only data. If a value matters, put it next to the sparkline — touch users and keyboard users can't hover.
  • Reduced motion respected. The optional draw-in animation honours prefers-reduced-motion: reduce and shows the final path immediately.