# Full chart libraries (/docs/full-chart-libraries)

[Recharts](https://recharts.org) and [Chart.js](https://www.chartjs.org) are full chart libraries. They draw surfaces
that are mostly chart: scales, legends, tooltips, plugins, dashboard layouts. microcharts draws a word-sized mark
_inside_ a surface you already have — a sentence, a table cell, a KPI, a streamed reply — where a full chart library
would be too heavy and too loud.

We are not a substitute for either. Read [When to use microcharts](/docs/when-to-use) for the product decision; this
page pins the size numbers so they stay honest.

## Side by side

|                      | Full library (Recharts, Chart.js, …) | microcharts                                     |
| -------------------- | ------------------------------------ | ----------------------------------------------- |
| Surface              | The chart _is_ the panel             | The chart sits in prose / cell / KPI            |
| Chrome               | Axes, legends, tooltips, brush       | None by design                                  |
| Typical budget       | Tens to hundreds of kB               | <SizeMarketing />                               |
| Runtime dependencies | Real dependency trees                | Zero (`dependencies: {}`; React is a peer)      |
| Server Components    | Usually a client chart runtime       | Default export is hook-free SVG, zero client JS |
| Accessible name      | You wire it (plugins, tables, aria)  | `role="img"` + summary from the data by default |

A product can use both when it needs both jobs.

## Recharts

Recharts is a strong default for React dashboards: composable `<LineChart>`, axes, tooltip, responsive container.

Orientation numbers (not “smaller wins for every app”):

<VsRechartsTable />

**Reach for Recharts** when the page is mostly chart — ticks, legends, brush, or a familiar Recharts tree.

**Reach for microcharts** when the mark must live in a sentence, a cell, or an RSC with nothing to hydrate.

```tsx
// Recharts — full surface
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
<ResponsiveContainer width="100%" height={240}>
  <LineChart data={rows}>
    <XAxis dataKey="t" />
    <YAxis />
    <Tooltip />
    <Line type="monotone" dataKey="v" />
  </LineChart>
</ResponsiveContainer>;

// microcharts — word-sized mark
import { Sparkline } from "@microcharts/react/sparkline";
<span className="mc-inline">
  <Sparkline data={[3, 5, 4, 8, 6, 9]} dots="none" summary={false} width={64} height={16} />
</span>;
```

## Chart.js

Chart.js is Canvas-first, with a large plugin and config ecosystem. In React it is usually wrapped by `react-chartjs-2`.
That stack is for dashboard and report canvases — not for a mark in a table cell.

<VsChartJsTable />

**Reach for Chart.js** when you need Canvas, existing Chart.js configs or plugins, or dense series on a chart panel.

**Reach for microcharts** when you need inline SVG, accessible-by-default summaries, or static RSC output.

Canvas charts need an explicit accessibility path (hidden table, aria, plugins). microcharts makes the accessible name
the default — see [Accessibility](/docs/accessibility). That is not a claim that Chart.js cannot be made accessible.

## What this page is not saying

- Not “faster than Recharts for dashboards”
- Not “Chart.js, but lighter, for the same job”
- Gzip figures here are orientation, not a scoreboard

If the job is a full chart, pick a full library. If the job is a word-sized mark, pick microcharts — or add it alongside
the library you already trust.

## Next

- [When to use microcharts](/docs/when-to-use)
- [microcharts vs Recharts](/docs/vs-recharts) · [microcharts vs Chart.js](/docs/vs-chartjs) — the per-library detail
- [React sparklines](/docs/react-sparklines)
- [Inline charts](/docs/inline-charts)
- [Performance](/docs/performance)
- [Introduction](/docs)