Sparkline

A quarter of revenue is six numbers in a row, and what you want from them is the shape. Sparkline draws those ordered values as one line, sized for a sentence, a table cell, or a KPI card. The default is the line plus an accent dot on the last point, which marks where "now" is; fill, a normal-range band, and min/max dots are props you turn on.

Install

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

Try it

When to use it

Use it for an inline trend, a table-cell trend, a KPI sparkline, and dense dashboards. It won't answer part-to-whole comparisons or 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 props on the same data. Each is off by default: at word size an extra fill or band takes pixels away from the line itself. Open the Code tab on any demo to see the call.

curve="smooth" interpolates with monotone cubic tangents, so the curve stays inside the range its own points span. A spike back down to zero cannot bow below zero on the way, and a filled area cannot cross its baseline.

Edge cases

A null means "no measurement here": the line breaks at the gap and never interpolates across it, so an outage doesn't render 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, because a zero-span domain maps to the middle of the range, so flat data reads as level rather than 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. An envelope is used instead of a stride sample so that a single spike at point 1,500 of 2,000 still renders. 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.

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} with no title 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.