# Introduction (/docs) 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](/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. ```tsx import { Sparkline } from "@microcharts/react/sparkline"; ``` ## 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](/docs/ai) 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](/docs/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: 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. ## 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](/docs/ai) shows a live stream doing it. Here's the same chart doing its job in four of those homes: **In a sentence** ```tsx

p95 latency this week{" "} {" "} — trending down.

``` **In a table cell** ```tsx checkout-api 31 ms ``` **In a KPI card** ```tsx
1,600 concurrent, now
``` **In a tab header** ```tsx ``` [Composition](/docs/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](/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 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](/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), [vs visx](/docs/vs-visx), and [vs TanStack Charts](/docs/vs-tanstack-charts). ### 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 has an 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 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](/docs/theming). ### How do I propose a new chart type? Open an issue first. The catalog is open to new types and already broad, so a proposal has to clear the admission bar: a data story the existing charts can't already tell, one honest encoding channel, and readable at ≤ 200×60 px without training. New props work the same way — bring the use case to an issue and wait for a yes before writing code. [CONTRIBUTING.md](https://github.com/ganapativs/microcharts/blob/main/CONTRIBUTING.md) has the policy. > Tested and in production use, but not across every stack and edge yet. If you hit something, open an issue on [GitHub](https://github.com/ganapativs/microcharts/issues). ## 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? Bug reports and fixes to existing charts are the most useful thing to send; new charts and new props start as an issue, where the use case gets worked out first. [CONTRIBUTING.md](https://github.com/ganapativs/microcharts/blob/main/CONTRIBUTING.md) covers the policy, the dev setup, and the CI gates a PR has to clear. The screenshot review that keeps all 106 charts looking right in light, dark, and every preset runs on [Argos](https://argos-ci.com?utm_source=ganapativs/microcharts&utm_campaign=oss), which is free for open source.