ganapativs/microcharts

**Word-sized charts for React** — zero runtime dependencies, ~2–7 kB interactive · ~1–4 kB static, accessible
by default, and server-component safe.
**Docs** · **Gallery** ·
**Quickstart** · **AI usage** ·
**llms.txt**
---
microcharts is **106 tiny, handcrafted chart types** built to sit _inside_ an interface: a sentence, a table cell, a KPI
card, a tab header, a streamed AI reply. The grammar is small enough for a model to emit correctly mid-sentence, and
every chart describes itself in words, so a chart an LLM streams into a chat reply is one a person can read and check.
> **Status:** tested and in production use, but not across every stack and edge yet. If you hit something, open an issue
> on GitHub.
Why
- **AI-native.** A chart is plain data plus a generated sentence. One grammar across all 106 types — a model that has
seen one chart can write them all. → AI usage
- **Zero dependencies.** No chart engine, no D3 — just SVG. React is the only peer. CI-enforced, forever.
- **Server-component safe.** Static charts are hook-free and render to HTML with **zero client JavaScript**.
Interactivity is a separate opt-in /interactive import.
- **Accessible by default.** Every chart is an img with a natural-language summary built from your data; it updates
when the numbers do. → Accessibility
- **Tiny.** **~2–7 kB interactive · ~1–4 kB static** gzip per chart, budget-gated in CI. Every type has one documented,
honest encoding channel and a stated precision.
- **Motion, opt-in.** Interactive charts draw on with animate plus one import "@microcharts/react/motion", and glide
continuous marks when data updates. Entrances respect prefers-reduced-motion and never replay over server-rendered
HTML. → Motion
Install
Import the stylesheet **once** at the root of your app — it carries every theming token and chart style in a
low-specificity cascade layer, so your own styles always win:
Your first chart
Every chart renders from data alone. This works in a **React Server Component** with zero client JavaScript — pure
SVG, and its accessible name is generated from the data.
Each chart imports from its **own subpath**, so you only ship what you use. Every chart follows the same two-entry
pattern: a static default, and an /interactive twin.
Add interactivity
Need hover, keyboard navigation, touch, or live announcements? Import the same chart from /interactive. The rendered
output and the accessible name are identical, because the interactive entry composes its static twin. It only **adds**
props; you opt into the client component where it matters.
Every interactive chart shares one contract, so you learn it once. Hover or arrow keys make a unit **active**; a click,
tap, Enter , or Space **selects** it and pins the readout so it survives blur; Escape or
a press outside the chart clears; Home / End jump to the ends. Read it back with onActive and
onSelect — payload { index, value, label?, formatted? }, where value is the raw number and formatted is the
chart's ready-to-display string — and control the pin with selectedIndex / defaultSelectedIndex. Set
readout={false} to hide the in-chart value chip and render datum.formatted wherever you like. Single-unit scalar
charts (Delta, Progress, StatusDot, Bullet, …) take onSelect alone.
Annotate with children
Thresholds, markers, and target zones are **children** — the same grammar on every chart that supports them: