# 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. Here is each job in code:

```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>;
```

Neither replaces the other. Read [When to use microcharts](/docs/when-to-use) for the product decision; this page pins
the size numbers so they stay accurate.

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

## Recharts

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

The gzip figures below are orientation, not a scoreboard — a smaller number doesn't win an app that needs ticks and a
brush:

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

## 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 draws dashboard and report canvases, at a size that doesn't fit 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: a hidden table, aria wiring, or a plugin. microcharts makes the
accessible name the default instead — see [Accessibility](/docs/accessibility). Chart.js can be made accessible; it just
isn't accessible until you do that work.

## Picking one

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 run. Nothing on this page claims microcharts is faster than Recharts for a dashboard, or that
it's a lighter Chart.js for the same job. Those are different jobs, and comparing across them wouldn't tell you
anything.

## 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
- [microcharts vs TanStack Charts](/docs/vs-tanstack-charts) — a typed chart grammar, measured at `0.0.0`
- [React sparklines](/docs/react-sparklines)
- [Inline charts](/docs/inline-charts)
- [Performance](/docs/performance)
- [Introduction](/docs)