# Introduction (/docs) 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](/docs/quickstart#set-up-with-an-ai-agent) — 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](/docs/quickstart#set-up-manually). 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. ```tsx import { Sparkline } from "@microcharts/react/sparkline"; ``` ## 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](/docs/ai) 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: A representative slice of the catalog spans trends, comparisons, distributions, and status — see every chart type at [/docs/charts](/docs/charts). Browse them all on the [All charts](/docs/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](/docs/ai) shows a live stream doing exactly that. Here's the same chart doing its job in four of those homes: [Composition](/docs/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](/docs/when-to-use). Ready to render one? The [Quickstart](/docs/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](/docs/when-to-use) and [Full chart libraries](/docs/full-chart-libraries), or the measured per-library pages: [vs Recharts](/docs/vs-recharts), [vs Chart.js](/docs/vs-chartjs), [vs react-sparklines](/docs/vs-react-sparklines), [vs MUI X Sparkline](/docs/vs-mui-x-sparkline), and [vs visx](/docs/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](/docs/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](/docs/charts/segmented-bar) for pie, [Bullet](/docs/charts/bullet) for gauges, [IconArray](/docs/charts/icon-array) for waffle. The reasoning lives in [Design notes](/docs/design-notes) and [When to use](/docs/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](/docs/quickstart#set-up-manually). ### 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](/docs/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](https://github.com/ganapativs/microcharts/blob/main/CONTRIBUTING.md) walks through the rest. > microcharts is tested and ready to use in production — but it hasn't been battle-tested across every stack and edge yet, so you may hit the occasional rough edge. When you do, tell us: bug reports and feature requests on [GitHub](https://github.com/ganapativs/microcharts/issues) are how it keeps getting sharper. ## Made by microcharts is designed and built by [Ganapati V S](https://meetguns.com) — [@ganapativs](https://x.com/ganapativs) on X, [ganapativs](https://github.com/ganapativs) on GitHub. It's free and open source under the MIT license; the code lives on [GitHub](https://github.com/ganapativs/microcharts), where issues, ideas, and stars are all welcome. Want to contribute? [CONTRIBUTING.md](https://github.com/ganapativs/microcharts/blob/main/CONTRIBUTING.md) covers the dev setup, the non-negotiables, and what a PR needs to ship.