# microcharts (https://microcharts.dev)

> Word-sized React charts — tiny sparklines, micro charts & inline SVG trend lines. Zero runtime deps, ~2–7 kB interactive · ~1–4 kB static, accessible by default, RSC-safe. Sit in a sentence, table cell, KPI card, or AI reply.

microcharts renders charts small enough to sit inside a sentence, a table cell, a KPI card, or a streamed model reply. Each chart type is one import from its own subpath, so a page pays for the marks it uses and nothing else.

## Install

```bash
npm i @microcharts/react
```

## Render one

```tsx
import { Sparkline } from "@microcharts/react/sparkline";
import "@microcharts/react/styles.css";

export function Revenue() {
  return <Sparkline data={[128, 131, 129, 138, 141, 139, 148, 152]} title="Revenue" />;
}
```

Pass `data` and you get something correct. After that, `domain`, `color`, `title`, `format` and `label` mean the same thing on every chart.

## What ships

- **106 chart types**, one grammar between them. Sparklines, bars, bullets, heat strips, box plots, donuts, hypnograms, and the rest of the catalog.
- **Zero runtime dependencies.** React is the only peer. Scales, paths, easing, colour, statistics and summaries are all in-house.
- **~2–7 kB interactive · ~1–4 kB static**, gzipped, per chart. The median static chart is 2.78 kB.
- **Accessible by default.** Every chart is `role="img"` with a natural-language summary generated from the data. Direction and state are never colour alone.
- **Server-component safe.** Default exports are hook-free pure SVG with zero client JavaScript. Interactivity is a separate `/interactive` import.

## Read next

- [Quickstart](https://microcharts.dev/docs/quickstart) — install, wire the stylesheet, render the first chart.
- [All charts](https://microcharts.dev/docs/charts) — every type, filed by the question it answers.
- [Chart index](https://microcharts.dev/charts) — the catalog at a glance.
- [When to use it](https://microcharts.dev/docs/when-to-use) — and when a full chart library is the right call.
- [AI-native](https://microcharts.dev/docs/ai) — emitting charts from a model, and the MCP server.
- [Examples](https://microcharts.dev/examples) — seven deployed apps that install the package from npm.

## Machine-readable surfaces

- [https://microcharts.dev/llms.txt](https://microcharts.dev/llms.txt) — index of this site, written for agents.
- [https://microcharts.dev/llms-full.txt](https://microcharts.dev/llms-full.txt) — every documentation page as one file.
- [https://microcharts.dev/catalog.json](https://microcharts.dev/catalog.json) — all 106 chart types with props and data shapes.
- [https://microcharts.dev/api/charts.json](https://microcharts.dev/api/charts.json) — the same catalog as an index, one chart per fetch.
- [https://microcharts.dev/openapi.json](https://microcharts.dev/openapi.json) — OpenAPI 3.1 description of every endpoint here.
- [https://microcharts.dev/agent-setup.md](https://microcharts.dev/agent-setup.md) — paste-and-run setup prompt for a coding agent.

Any page on this site answers `Accept: text/markdown` with its Markdown twin, and every twin is also fetchable by adding `.md` to the URL.