Sparkline

Sparkline draws a compact trend over ordered values. Reach for it when direction and shape matter more than exact points — inline in a sentence, inside a table cell, or as the quiet backbone of a KPI card.

Install

import { Sparkline } from "@microcharts/react/sparkline";<Sparkline data={[3, 5, 4, 8, 6, 9]} title="Weekly revenue" />

Try it

When to use it

• Good for — an inline trend, a table-cell trend, a KPI sparkline, dense dashboards.
• Avoid for — part-to-whole comparisons or reading exact category values. Use SparkBar for discrete magnitudes, or Bullet for a value against a target.

Sizing

width and height are viewBox units that also set the rendered pixel box. Omit them and drive the width from CSS for a chart that fills its container — the viewBox keeps the aspect ratio.

Variants

Shape, fill, a normal-range band, and dots are all props — same data, different read. Flip any of them to the Code tab.

Edge cases

A null means "no measurement here" — the line breaks at the gap and never interpolates across it, so an outage can't masquerade as a smooth trend. A single point has no line to draw; it sits centered in the plot, visible as the default endpoint dot. An all-equal series renders on the vertical mid-line — a zero-span domain maps to the middle of the range, so flat data reads as level, not as bottomed-out.

Past maxPoints (default 200) the drawn line decimates to a min/max-preserving envelope: every spike keeps its true position and height, gaps stay gaps, and the summary, dots, and hover values still come from the raw data — only the path gets lighter. Pass maxPoints={Infinity} to opt out.

Four homes

The same chart, sized for four real contexts. Each preview is the public component plus styles.css — no docs-only wrappers. Sentence placements use mc-inline; see Composition and Sizing.

Why this default

A bare line plus one accent dot on the last point — no fill, no band, no min/max dots. The shape of the series is the whole story until you ask for more, and the endpoint dot marks where "now" is. Min/max dots, fill, and the band are opt-in because at word size they compete with the line for the same few pixels; adding them by default would make every sparkline noisier for the common case that only needs direction and range. Long series decimate to a min/max-preserving envelope rather than a naive stride sample, so a single spike at point 1,500 of 2,000 still shows up — silently dropping it would be the more common bug in a naive implementation, and a chart that hides its own spikes is dishonest by construction.

Accessibility

By default the chart is an img whose accessible name is generated from the data. The example above is announced as:

Weekly revenue. Trending up 200%. Range 3 to 9. Last value 9.

Pass a title to name it, or summary={false} to make it decorative when the surrounding text already says what it shows. The interactive entry adds a polite live region that reads each focused point as you arrow through it.

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.