When to use microcharts
How to tell whether a job wants a word-sized chart or a full chart library like Recharts or Chart.js, and how to use both in one product.
microcharts draws tiny charts for React that sit inside an interface: a trend after a number, a bullet in a KPI, a strip in a table cell, a mark in a streamed reply.
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 mostly words and UI with a word-sized mark in them. Use a full library when the page is the chart. Use microcharts when the chart sits inside something you were already reading.
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 |
Same app, two jobs
Most products need both rows of that table. Use Recharts on the 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} />;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. Each one is 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.
What the catalog leaves out
Pie, needle gauges, waffles, and similar shapes fail at word size, so they're excluded on purpose. Each has an in-catalog replacement — for example SegmentedBar, Bullet, and IconArray. The reasoning is in Design notes.
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
Why microcharts defaults the way it does — no axes or legends, static-first entries, one shared grammar, generated summaries, size budgets as CI gates, and the bar a new chart type has to clear.
React sparklines
What a sparkline is, how to render one in React with @microcharts/react, and how it compares to the legacy react-sparklines package.