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.
Word-sized charts sit inside the interface you already ship: a trend in a table cell, a sparkline after a number, a
bullet in a KPI, a mark in a streamed reply — not a chart page you navigate to. That is what @microcharts/react is
built for. Full dashboard canvases belong with full chart libraries.
106 types, one grammar. Size band: ~2–7 kB interactive · ~1–4 kB static. Static entries ship zero client JavaScript from a
React Server Component. Accessible by default — each chart is an img with a summary generated from the data.
One mark, four homes
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.
The surfaces
In a sentence
Wrap with mc-inline, drop endpoint dots, mark decorative when the sentence already carries the meaning:
p95 latency this week — trending down.
In a table cell
| Service | Trend | Now |
|---|---|---|
| checkout | 31ms | |
| search | 78ms |
In a KPI / tab
Attainment and cadence marks stay tiny on purpose — Bullet, Progress, Delta, StatusDot.
Exact placement recipes: Composition. Broader fit: When to use microcharts.
Server-component safe
Static charts are hook-free and listener-free — they render to HTML with zero client JavaScript. Add interactivity only
from a separate /interactive subpath.
// Server Component — no "use client", nothing to hydrate for the chart
import { Sparkline } from "@microcharts/react/sparkline";
export default function Row() {
return <Sparkline data={[3, 5, 4, 8, 6, 9]} title="Weekly revenue" />;
}Start here
pnpm add @microcharts/react- When to use microcharts
- React sparklines
- Introduction — grammar and catalog
- Quickstart
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.
Full chart libraries
How microcharts relates to Recharts and Chart.js — different jobs, not replacements. Word-sized marks inside UI vs full chart surfaces. Measured size pins for orientation; see Performance for our CI receipts.