React sparklines

A sparkline is a trend small enough to sit in a sentence: enough line to read direction and shape, with no axes, legend, or panel around it. In React that means a word-sized SVG mark next to a number or inside a table cell.

This page covers that mark in @microcharts/react. Props, variants, and edge cases live on Sparkline.

Install

Both steps are required — package and stylesheet:

import { Sparkline } from "@microcharts/react/sparkline";
import "@microcharts/react/styles.css"; // once, at the app root

<Sparkline data={[3, 5, 4, 8, 6, 9]} title="Weekly revenue" />;

Measured size for this chart: 4.25 kB static · 6.94 kB interactive gzip (CI-enforced). Catalog-wide band:

~2–7 kB interactive · ~1–4 kB static. The default export is static, so it renders from an RSC with zero client JavaScript. Add @microcharts/react/sparkline/interactive when you need hover, keyboard, touch, or selection.

Where it sits

Same component in four homes — product UI, report, docs, and an AI reply:

Placement recipes: Composition. When this library fits vs a full chart library: When to use microcharts.

About react-sparklines

Many searches still land on react-sparklines (Boris Yankov), which still pulls about 250k downloads in the week ending 2026-07-21 on a last npm publish of 2017-07-27 (1.7.0). It's the same visual idea from a different era of React: class-component patterns, prop-types, no generated accessible summary, and no RSC story. The measured side-by-side lives at microcharts vs react-sparklines.

microcharts isn't that package rewritten. It's a word-sized catalog of 106 types under one grammar, and Sparkline is one chart in it: data alone renders, accessibility is on by default (role="img" plus a summary from the data), the static entry is RSC-safe, and there are zero runtime dependencies. If react-sparklines still fits your stack, keep it. If you want the contract above, start here.

When not to use a sparkline

• Exact category comparison → MiniBar or SparkBar
• Value against a target → Bullet
• Part-to-whole → SegmentedBar or MicroDonut
• Full axes, legend, brush, zoom → a full chart library

Related marks

• SparkBar — discrete magnitudes or win–loss
• DualSparkline — two series, one scale
• TrendArrow — direction as a glyph
• Delta — a single signed change
• Horizon — wide-range series in a slim band

Next

• Sparkline API
• Inline charts
• When to use microcharts
• Quickstart