Introduction

microcharts renders charts small enough to sit inside a sentence: a trend in a table cell, a bullet in a KPI card, a sparkline in a streamed AI reply. The grammar is small and predictable enough for a model to emit correctly mid-stream, and every chart generates a plain-language description of its own data, so a chart an LLM writes into a chat reply, a document, or a slide is one a person can read and check.

The fastest setup is 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.

Why microcharts

• AI-native. 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 primary surfaces. One grammar across 106 types means an LLM that has seen one chart can write them all, and an assistant that speaks MCP can call them directly.
• 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. Interactivity comes 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. The summary is generated, so it updates when the numbers do.
• 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 picking a chart is picking the question you need answered.

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.

Where they live

A word-sized chart belongs inside the interface it describes. And because it's plain SVG rendered from data alone, "interface" reaches past the browser tab:

• In your product — a trend in a table cell, a KPI card, a tab header, a dense dashboard.
• 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 page are rendered that way: MDX in, live SVG out.
• In an AI reply — streamed mid-sentence by a model. AI-native shows a live stream doing it.

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

Composition has the placement recipe for each surface — a table cell, a KPI card, a tab, or inline in a sentence. Unsure whether you need this library or a full chart library? 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 in the space of a word.

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?

Recharts and Chart.js are built for surfaces that are mostly chart; in a table cell, their smallest chart is larger than the cell. microcharts is built for the cell itself: word-sized SVG marks, one chart per subpath at ~2–7 kB interactive · ~1–4 kB static gzip, no axes or legends, and static entries that render from an RSC with zero client JavaScript. The two solve different problems — 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 has an 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 matched dark twins, in OKLCH, with zero dependencies; or set the --mc-* tokens directly. A theme never changes 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. 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.

The screenshot review that keeps all 106 charts looking right in light, dark, and every preset runs on Argos, which is free for open source.