Introduction

microcharts is a set of tiny, handcrafted charts for React — made for AI first, and for the people reading what it writes. The grammar is small and predictable 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, a document, or a generated slide is one a person can read and trust. They're built to sit inside an interface — in a sentence, a table cell, a KPI card, a tab header, a streamed reply — where a full chart library would be too heavy and too loud. One quiet signal, read at a glance.

Prefer Set up with AI — paste one prompt and an agent installs the package, imports the stylesheet, and verifies with a first chart. Or install manually (both steps are required):

The other half of manual setup is one stylesheet import at your app root — see the Quickstart.

Every chart renders from data alone, ships as pure SVG with zero runtime dependencies, and carries an accessible description generated from the data itself — the same properties that make it safe for a model to write are the ones that make it pleasant for a human to use.

Why microcharts

• AI-native, by design. A chart is plain data plus generated words, so a model can emit one mid-sentence and read one back — chat streams, agents, and tool output are the primary homes, not an afterthought. One grammar across 106 types means an LLM that has seen one chart can write them all.
• Zero dependencies. No chart engine, no D3 — just SVG. CI-enforced, forever.
• Server-component safe. Static charts are hook-free and listener-free; they render to HTML with zero client JavaScript, and add interactivity only from a separate /interactive subpath — where one contract covers the catalog: hover, roving arrow keys, touch scrub, and click-to-pin, read back through onActive / onSelect. Single-unit charts have nothing to rove between and take onSelect alone.
• Accessible by default. Each chart is an img with a natural-language summary built from your data — nothing to remember, nothing to drift.
• Tiny. ~2–7 kB interactive · ~1–4 kB static gzip each, imported from their own subpath and budget-gated in CI.

One catalog, one grammar

The library ships a full catalog of chart types, grouped by the question each one answers. data alone always renders something correct, and a prop name means the same thing on every chart — so you pick by the decision you need read, not by fighting an options bag.

From sparklines to bump charts, funnels, honeycombs, and calendar strips — a small sample of what ships:

Browse them all on the All charts page, which files every type under the question it answers — start from what you need someone to see, and land on the chart.

Where they live

The point of a word-sized chart is that it belongs in your interface, not in a dashboard off to the side. And because it's plain SVG that renders from data alone, "interface" isn't limited to a browser tab:

• In your product — a trend in a table cell, a KPI card, a tab header, a dense dashboard, where a full chart engine would be too heavy and too loud.
• In a report or slide — a figure in a rendered PDF or deck, the same markup that drops into a table cell, with nothing to export.
• In your docs — inline in Markdown, next to the sentence that explains it. The charts on this very page are rendered exactly that way — MDX in, live SVG out.
• In an AI reply — streamed mid-sentence by a model, since every chart is plain data plus generated words. AI-native shows a live stream doing exactly that.

Here's the same chart doing its job in four of those homes:

Composition has the exact placement recipe for each surface — a table cell, a KPI card, a tab, or inline in a sentence. Unsure whether this library or a full chart library fits? When to use microcharts. Ready to render one? The Quickstart gets you from install to a live chart in minutes.

FAQ

What are micro charts?

Micro charts — also called sparklines, tiny charts, or inline charts — are small, word-sized data visualizations: a trend line, bar, or dot that fits inside a sentence, table cell, or KPI card without axes or legends. They answer one question at a glance in the space of a word, where a full chart would be too heavy and too loud.

What is microcharts?

microcharts is a React chart library of word-sized SVG charts — sparklines, bars, bullets, and the rest of the catalog — built to sit inside sentences, table cells, KPI cards, and AI replies. Zero runtime dependencies, accessible by default, and server-component safe.

How is microcharts different from Recharts or Chart.js?

Those are full chart libraries for surfaces that are mostly chart. microcharts is built to sit inside an interface — word-sized SVG marks where a full chart library would be too heavy and too loud. One chart per subpath, typically ~2–7 kB interactive · ~1–4 kB static gzip, no axes or legends, static entries with zero client JavaScript from an RSC. We are not a replacement; see When to use and Full chart libraries, or the measured per-library pages: vs Recharts, vs Chart.js, vs react-sparklines, vs MUI X Sparkline, and vs visx.

Are microcharts accessible?

Yes. Every chart is role="img" with a natural-language summary generated from the data. Interactive entries add keyboard navigation and a polite live region. Direction and state are never color-alone — see Accessibility.

Do static microcharts need client JavaScript?

No. Default exports are hook-free pure SVG — RSC-safe with zero client JS. Import the matching /interactive subpath only when you need hover, keyboard, touch, or selection.

Why is there no pie chart, gauge, or waffle?

They fail at word size: pie angles are unreadable in a table cell, a needle gauge spends its pixels on chrome, a waffle doesn't fit in a word. Each refusal has an honest in-catalog replacement — SegmentedBar for pie, Bullet for gauges, IconArray for waffle. The reasoning lives in Design notes and When to use.

Why does my first chart render unstyled, or with serif labels?

Almost always one of two setup steps: the stylesheet isn't imported at your app root (import "@microcharts/react/styles.css", once), or the surrounding page never sets a font-family, so SVG text falls back to a serif — set --mc-font or give the page a font. Both are covered in the Quickstart.

Can I match the charts to my brand color?

Yes — pass one accent to defineTheme and it derives a color-blind-safe categorical palette plus hand-tuned-style dark twins, in OKLCH, with zero dependencies; or set the --mc-* tokens directly. The one thing a theme can never change is what the data means: positive and negative keep their hues on every accent and preset. See Theming.

How do I propose a new chart type?

Open an issue first. A new type must clear the admission bar: a unique data story the catalog can't already answer, one honest encoding channel, and readable at ≤ 200×60 px without training. It's a high bar on purpose — every shipped chart clears it, and CONTRIBUTING.md walks through the rest.

Made by

microcharts is designed and built by Ganapati V S — @ganapativs on X, ganapativs on GitHub. It's free and open source under the MIT license; the code lives on GitHub, where issues, ideas, and stars are all welcome.

Want to contribute? CONTRIBUTING.md covers the dev setup, the non-negotiables, and what a PR needs to ship.