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

microcharts draws tiny charts for React that sit _inside_ an interface: a trend after a number, a bullet in a KPI, a
strip in a table cell, a mark in a streamed reply.

It is not a substitute for [Recharts](https://recharts.org), [Chart.js](https://www.chartjs.org), Nivo, ECharts, visx,
or [TanStack Charts](https://tanstack.com/charts). Those libraries draw surfaces that are mostly chart: axes, legends,
tooltips, brush, zoom. microcharts draws mostly words and UI with a word-sized mark in them. Use a full library when the
page _is_ the chart. Use microcharts when the chart sits inside something you were already reading.

## 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 |

## Same app, two jobs

Most products need both rows of that table. Use Recharts on the 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} />;
```

## 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. Each one is `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).

## What the catalog leaves out

Pie, needle gauges, waffles, and similar shapes fail at word size, so they're excluded on purpose. Each has an
in-catalog replacement — for example [SegmentedBar](/docs/charts/segmented-bar), [Bullet](/docs/charts/bullet), and
[IconArray](/docs/charts/icon-array). The reasoning is in [Design notes](/docs/design-notes#what-we-dont-ship).

## 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) · [vs TanStack Charts](/docs/vs-tanstack-charts)
- [Quickstart](/docs/quickstart) — install and first chart
- [Introduction](/docs) — grammar, catalog, and where they live