# When to use microcharts (/docs/when-to-use)

microcharts is a set of tiny, handcrafted charts for React — built to sit _inside_ an interface, where a full chart
library would be too heavy and too loud. A trend after a number, a bullet in a KPI, a strip in a table cell, a mark in a
streamed reply. One quiet signal, read at a glance.

It is not a substitute for [Recharts](https://recharts.org), [Chart.js](https://www.chartjs.org), Nivo, ECharts, or
visx. Those libraries draw surfaces that are mostly chart: axes, legends, tooltips, brush, zoom. microcharts draws the
opposite: mostly words and UI, with a word-sized mark.

Use a full library when the page _is_ the chart. Use microcharts when the chart sits inside something you were already
reading — or use both in the same product.

## Fit

| Situation                                                                | Fit                                                              |
| ------------------------------------------------------------------------ | ---------------------------------------------------------------- |
| Sparkline, bullet, or delta in prose, a cell, a tab, or a card           | **microcharts**                                                  |
| Static chart from a React Server Component with **zero** client chart JS | **microcharts** (default export)                                 |
| A model or agent emitting a chart mid-reply                              | **microcharts** — see [AI-native](/docs/ai)                      |
| Full Line / Bar / Area with ticks, legend, tooltip, brush                | **Recharts, Chart.js, …**                                        |
| Dense Canvas series, Chart.js plugins, analyst dashboards                | **Chart.js** (or similar)                                        |
| One library for every chart in the product                               | Usually a **full** library; add microcharts for the inline marks |

## What this library refuses

Pie, needle gauges, waffles, and similar shapes fail at word size — they are excluded on purpose. Each has a
strictly-better in-catalog replacement (for example [SegmentedBar](/docs/charts/segmented-bar),
[Bullet](/docs/charts/bullet), [IconArray](/docs/charts/icon-array)). See the [introduction](/docs).

## Size

Every chart is imported from its own subpath and budget-gated in CI: <SizeMarketing /> gzip, **zero runtime
dependencies**, static SVG from an RSC with nothing to hydrate. Accessible by default — `role="img"` with a summary
generated from the data.

Pinned orientation numbers for Recharts and Chart.js (version, date, method):
[Full chart libraries](/docs/full-chart-libraries). Our own receipts: [Performance](/docs/performance).

## Same app, two jobs

A product can use Recharts on an analytics page and a Sparkline in the table that links to it. Different import,
different budget.

```tsx
// dashboard panel — your full chart library
<ResponsiveContainer>…</ResponsiveContainer>;

// same product, table cell — microcharts
import { Sparkline } from "@microcharts/react/sparkline";
<Sparkline data={row.series} width={72} height={16} dots="none" summary={false} />;
```

## Go deeper

- [React sparklines](/docs/react-sparklines) — the most common word-sized mark
- [Inline charts](/docs/inline-charts) — sentences, cells, KPIs, tabs, RSC
- [Full chart libraries](/docs/full-chart-libraries) — Recharts and Chart.js, side by side
- Comparing a specific library? [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)
- [Quickstart](/docs/quickstart) — install and first chart
- [Introduction](/docs) — grammar, catalog, and where they live