Show HN: Tiny React charts that fit in a line of text, zero deps

A new open-source React charting library, @microcharts/react, offers 106 chart types small enough to fit inside a line of text, with zero dependencies and a size of 2.17–6.75 kB per interactive chart, enforced in CI. The library is designed for AI agents to write charts directly, with every chart reading the same way and bad data degrading gracefully instead of crashing. It includes built-in accessibility features such as auto-generated alt text, keyboard navigation, and support for system preferences like prefers-reduced-motion.

Small enough for a model to write , sharp enough for a person to trust . Word-sized React charts. 106 types that fit inside a sentence, a table cell, or a streamed reply. pnpm add @microcharts/react Set up with AI /docs/quickstart set-up-with-an-ai-agent live · Gemini Nano in your Chrome · numbers are illustrative Charts a model can type Every chart reads the same way: data alone renders something correct, and a prop like domain or color means the same thing everywhere. Once a model has seen one of these, it can write the other 105. an agent writes <Sparkline title="Weekly revenue" data={ 132, 148, 141, 165, 159, 182, 176, 203 } curve="smooth" / a person gets 106 chart types, each the size of a word hover a tile, they’re live What we left out Pie, gauges and a few other familiar shapes don’t survive at word size. Each one has a replacement here that answers the same question and stays legible. ~~pie~~SegmentedBar~~needle gauge~~Bullet~~violin~~MicroBox~~battery~~Progress~~waffle~~IconArray They sit where your text already is Both mockups below are rendered live from the library, down to the sparkline inside the table cell. Revenue held its climb into Q3. | Region | Trend | |---|---| | EU | | | US | Deploys are healthy this week and error budget is holding. Charts arrive as plain text A streamed reply is ordinary text until a chart fence closes; at that moment the block becomes the shipped component. Works with any of the 37 tools below, and anything else that writes text. - Claude - ChatGPT - Gemini - Grok DeepSeek · Kimi · Meta AI · Mistral · Perplexity · Qwen · Poe - Cursor - Claude Code - Codex - v0 - opencode - Antigravity Windsurf · Zed · Cline · Replit · Continue · Warp · Amp · Roo Code · StackBlitz · JetBrains AI · Pi · Copilot - Vercel AI SDK - OpenAI Agents - LangChain - Anthropic SDK Hugging Face · Ollama · Pydantic AI · CrewAI Docs a model can read whole curl microcharts.dev/llms.txt /llms.txt → the library, summarized for a model's context window curl microcharts.dev/llms-full.txt /llms-full.txt → every doc page, one file, ready to paste into a system prompt curl microcharts.dev/catalog.json /catalog.json → all types with props and data shapes, machine-readable curl microcharts.dev/agent-setup.md /agent-setup.md → the whole setup as one prompt: install, conventions, first chart npx -y @microcharts/mcp /docs/mcp → find microchart · get microchart · render microchart, finished SVGs for surfaces that can’t run React Bad data degrades, it doesn’t crash NaN, 3, Infinity “Single value 3.” “No data.” 7 “Single value 7.” -4, -4 “Flat at -4.” A model mid-reply will sometimes emit NaN, Infinity, or an empty array. Each case renders something sensible, with no try/catch on this page. Screen readers get a real sentence A chart’s accessible name is a sentence generated from its data, on by default. You don’t write alt text and it can’t go stale, because it comes from the same numbers the chart draws. - “Trending up 27%. Range 128 to 163. Last value 163.” - “Trending up 75%. Range 2 to 9. Last value 7.” Named by its data Charts are role="img", named by the generated sentence, so the caption can never drift from the numbers. Keyboard, one tab stop Interactive charts take a single focus; arrows rove the units, Enter pins the readout so it survives blur. Announced politely Each change of the active or selected unit is written to a polite live region, throttled so a stream never spams. Never color alone Direction and state are doubled by glyph and position, and strokes clear a 4.5:1 contrast target by default. System preferences, handled prefers-reduced-motion, forced-colors, and prefers-contrast all work without any setup on your side. 2.17–6.75 kB per interactive chart, enforced in CI Recharts is a full charting toolkit, and its bill is fair for what it carries: one tree-shaken LineChart still costs about 106 kB gzip and 11 dependencies, because the shared kernel comes along. On a page that is mostly chart, that’s fine. Inside a sentence or a table cell, it’s most of your budget. microcharts covers the other job: you already know the shape of the answer and just need the mark, small enough to live in the interface. what it costs to draw one chart, to scale Both bars share one scale. Tree-shaking drops Recharts’ unused chart types, but a single LineChart still ships the shared Redux/d3 kernel; a microcharts subpath is just the inlined mark, static from 1 kB. recharts 3.9.2 one-chart: esbuild tree-shake, 2026-07 · package 145 kB via bundlephobia · microcharts interactive median from .size-limit.json, CI-enforced 2.17–6.75 kB gzip per interactive chart median 5.07 kB · static 1–4.07 kB median 2.64 0 runtime dependencies dependencies: {} forever; React is a peer 0 kB client JS for static charts pure SVG out of an RSC; nothing hydrates The whole palette, from your one brand color defineTheme derives a color-blind-safe palette and matched dark variants from one brand color. Pick a swatch: every chart re-themes through the same CSS custom properties your app would use, and positive stays green, negative stays vermillion. The full theming contract /docs/theming defineTheme { accent: " c2410c" } Seven real apps, all 106 charts We built 7 example apps with @microcharts/react installed from npm, and between them they use every chart type in the catalog. Each card opens the live app, or you can walk through them as pages /examples . Start with a sparkline in a sentence pnpm add @microcharts/react