React sparklines
Word-sized React sparklines with @microcharts/react — accessible by default, RSC-safe static SVG, zero runtime dependencies. For sentences, table cells, and KPIs. Full API on the Sparkline chart page.
A sparkline is a trend small enough to sit in a sentence: direction and shape at a glance — not a dashboard panel with axes. In React, that means a word-sized SVG mark next to a number or inside a table cell, where a full chart library would be too heavy and too loud.
This page covers that mark in @microcharts/react. Props, variants, and edge cases live on
Sparkline.
Install
Both steps are required — package and stylesheet:
pnpm add @microcharts/reactimport { 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: 3.99 kB static · 6.64 kB interactive gzip (CI-enforced). Catalog-wide band:
~2–7 kB interactive · ~1–4 kB static. The default export is static — RSC-safe, zero client JavaScript. Add
@microcharts/react/sparkline/interactive only when hover, keyboard, touch, or selection is needed.
Where it sits
Same component in four homes — product UI, report, docs, and an AI reply:
p95 latency this week — trending down.
| checkout-api | 31 ms | |
| auth-api | 16 ms | |
| search-api | 78 ms |
Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion — code samples stay on the static import. Placement recipes: Composition, Sizing.
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) — about
250k downloads in the week ending 2026-07-21, last npm publish 2017-07-27 (1.7.0). Same visual idea; a
different era of React (class-component patterns, prop-types, no generated accessible summary, not aimed at RSC). The
measured side-by-side lives at microcharts vs react-sparklines.
microcharts is not that package rewritten. It is a word-sized catalog — 106 types, one grammar — where
Sparkline is one chart: data alone renders, accessible by default (role="img" + a summary from the data), static RSC
entry, zero runtime dependencies. If react-sparklines still fits your stack, that is a valid choice. 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
When to use microcharts
Word-sized React charts for sentences, table cells, KPI cards, and streamed replies — not a Recharts or Chart.js replacement. When microcharts fits, when a full chart library fits, and how they can sit in the same app.
Inline charts
Word-sized inline React charts for sentences, table cells, KPI cards, tabs, and streamed replies — zero runtime dependencies, accessible by default, RSC-safe static SVG. Where a full chart library would be too heavy and too loud.