Inline charts
Where word-sized React charts go — a sentence, a table cell, a KPI card, a tab — with the code for each placement.
@microcharts/react renders charts small enough to 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. For a full dashboard canvas, reach for
a full chart library instead.
106 types, one grammar, zero runtime dependencies. Size band: ~2–7 kB interactive · ~1–4 kB static. Static entries ship zero
client JavaScript from a React Server Component. Every 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 small enough for a card or a tab header: 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, so they render to HTML with zero client JavaScript. Interactivity comes
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