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.
microcharts is a set of tiny, handcrafted charts for React — built to sit inside an interface, where a full chart library would be too heavy and too loud. A trend after a number, a bullet in a KPI, a strip in a table cell, a mark in a streamed reply. One quiet signal, read at a glance.
It is not a substitute for Recharts, Chart.js, Nivo, ECharts, or visx. Those libraries draw surfaces that are mostly chart: axes, legends, tooltips, brush, zoom. microcharts draws the opposite: mostly words and UI, with a word-sized mark.
Use a full library when the page is the chart. Use microcharts when the chart sits inside something you were already reading — or use both in the same product.
Fit
| Situation | Fit |
|---|---|
| Sparkline, bullet, or delta in prose, a cell, a tab, or a card | microcharts |
| Static chart from a React Server Component with zero client chart JS | microcharts (default export) |
| A model or agent emitting a chart mid-reply | microcharts — see AI-native |
| Full Line / Bar / Area with ticks, legend, tooltip, brush | Recharts, Chart.js, … |
| Dense Canvas series, Chart.js plugins, analyst dashboards | Chart.js (or similar) |
| One library for every chart in the product | Usually a full library; add microcharts for the inline marks |
What this library refuses
Pie, needle gauges, waffles, and similar shapes fail at word size — they are excluded on purpose. Each has a strictly-better in-catalog replacement (for example SegmentedBar, Bullet, IconArray). See the introduction.
Size
Every chart is imported from its own subpath and budget-gated in CI: ~2–7 kB interactive · ~1–4 kB static gzip, zero runtime
dependencies, static SVG from an RSC with nothing to hydrate. Accessible by default — role="img" with a summary
generated from the data.
Pinned orientation numbers for Recharts and Chart.js (version, date, method): Full chart libraries. Our own receipts: Performance.
Same app, two jobs
A product can use Recharts on an analytics page and a Sparkline in the table that links to it. Different import, different budget.
// dashboard panel — your full chart library
<ResponsiveContainer>…</ResponsiveContainer>;
// same product, table cell — microcharts
import { Sparkline } from "@microcharts/react/sparkline";
<Sparkline data={row.series} width={72} height={16} dots="none" summary={false} />;Go deeper
- React sparklines — the most common word-sized mark
- Inline charts — sentences, cells, KPIs, tabs, RSC
- Full chart libraries — Recharts and Chart.js, side by side
- Comparing a specific library? vs Recharts · vs Chart.js · vs react-sparklines · vs MUI X Sparkline · vs visx
- Quickstart — install and first chart
- Introduction — grammar, catalog, and where they live
Design notes
The reasoning behind microcharts' defaults — direct labels over chrome, static-first architecture, one grammar, summaries as a first-class feature, budgets as build gates, and a strict bar for admitting a new chart type.
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.