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 — where a full chart library would be too heavy and too loud.

We are not a substitute for either. Read When to use microcharts for the product decision; this page pins the size numbers so they stay honest.

Side by side

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”):

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.

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

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 (hidden table, aria, plugins). microcharts makes the accessible name the default — see 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
• microcharts vs Recharts · microcharts vs Chart.js — the per-library detail
• React sparklines
• Inline charts
• Performance
• Introduction