microcharts vs react-sparklines — React sparkline comparison
How react-sparklines, last published in 2017, compares with microcharts on size, accessibility, Server Components, and scope, plus the code to move a chart from one to the other.
react-sparklines put sparklines into thousands of React apps and
still gets massive weekly downloads. It is the package many "react sparkline" searches land on, so if you are choosing
between it and microcharts, this page is the factual side-by-side. The package earned its adoption; what follows is what
has changed since it was written.
The numbers
| Signal | react-sparklines 1.7.0 | microcharts Sparkline |
|---|---|---|
| Gzip (react external) | 7.9 kB | 4.25 kB static · 6.94 kB interactive |
| Last npm publish | 2017-07-27 | actively maintained |
| Runtime dependencies | prop-types | 0 (React is a peer) |
| Accessible name | none by default (bare <svg>) | role="img" + summary from the data |
| Server Components | class components — need a client boundary | static entry renders in RSC, zero client JS |
react-sparklines gzip via esbuild minify+gzip 2026-07-23; last publish + deps from npm. microcharts from .size-limit.json (CI).
The same chart in both
The shapes map directly:
// react-sparklines
import { Sparklines, SparklinesLine } from "react-sparklines";
<Sparklines data={[3, 5, 4, 8, 6, 9]} width={100} height={20}>
<SparklinesLine color="steelblue" />
</Sparklines>;
// microcharts
import { Sparkline } from "@microcharts/react/sparkline";
<Sparkline data={[3, 5, 4, 8, 6, 9]} width={100} height={20} color="steelblue" title="Weekly revenue" />;title gives the chart its accessible subject; the summary is generated from the data. Bars map to
SparkBar, reference lines to <Threshold>.
What changed since 2017
Maintenance. react-sparklines last published in 2017 (1.7.0). It predates hooks and Server Components, so
nothing from that era can be expected to target them. microcharts is actively maintained against React 18 and 19, with
StrictMode-safe rendering tested in CI.
Accessibility. react-sparklines renders a bare <svg>: no role, no <title>, no accessible name, so a screen
reader finds nothing. Every microchart is role="img" with a natural-language summary generated from the data
(describeSeries), and interactive entries add keyboard navigation with a polite live region.
Server Components. react-sparklines components are class components, which need a client boundary in an App Router
app. The microcharts default export is hook-free static SVG that renders directly in an RSC with zero client JavaScript.
Scope and size
microcharts is a catalog of 106 word-sized chart types under one grammar: data alone renders something
correct, and the same prop names mean the same thing on every chart. Sparkline is one entry in it. react-sparklines is
one visual idea with composable overlays.
Both are small. react-sparklines is a single ~7.9 kB gzip package; microcharts charges per chart subpath
(4.25 kB static · 6.94 kB interactive for Sparkline) with a CI gate that keeps every chart inside its budget.
When react-sparklines is still fine
- A legacy codebase already uses it, the charts are decorative, and nothing is broken
- You need its exact composable-overlay API and have your own accessibility layer
There is no urgency to migrate in those cases. The gaps above matter when accessibility, RSC, or maintenance start to cost you something.
Next
- React sparklines — the mark itself, in depth
- Sparkline API
- When to use microcharts
- Accessibility
microcharts vs Chart.js for inline charts
Chart.js draws to a canvas and microcharts renders SVG; this page follows what that one difference does to bundle size, server rendering, accessibility, and theming for a word-sized chart.
microcharts vs MUI X Sparkline — bundle size and RSC comparison
MUI X's SparkLineChart next to a microcharts Sparkline: measured gzip inside and outside a MUI app, required peer dependencies, Server Component behavior, and accessibility defaults.