Full chart libraries

Recharts and Chart.js 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:

// 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 for the product decision; this page pins the size numbers so they stay accurate.

Side by side

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:

Orientation only — different jobs. Recharts package via bundlephobia 2026-07; one-chart via esbuild tree-shake 2026-07. microcharts from .size-limit.json (CI).

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.

Orientation only — different jobs. Chart.js via bundlephobia 2026-07-21. microcharts from .size-limit.json (CI).

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. 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
• microcharts vs Recharts · microcharts vs Chart.js — the per-library detail
• React sparklines
• Inline charts
• Performance
• Introduction