microcharts vs Chart.js for inline charts
Chart.js draws to a canvas and microcharts renders SVG; this page follows what that one difference does to bundle size, server rendering, accessibility, and theming for a word-sized chart.
Chart.js is a Canvas-first chart library with a large plugin ecosystem, usually wrapped by
react-chartjs-2 in React apps. microcharts renders SVG. Almost every difference
below follows from that one difference, so this page is organized around the renderer rather than a feature list.
A dense analyst dashboard or a report full of chart panels is Chart.js territory. The comparison here covers one narrow job: a chart the size of a word, inside a sentence, a table cell, or a KPI card. Broader positioning lives in When to use microcharts and Full chart libraries.
The numbers
| Signal | Chart.js 4.5.1 + react-chartjs-2 | microcharts Sparkline |
|---|---|---|
| Gzip (library) | ~66.7 kB (+ ~1 kB wrapper) | 4.25 kB static · 6.94 kB interactive |
| Renderer | Canvas | SVG |
| Runtime dependencies | 1 (in chart.js) | 0 (React is a peer) |
| Typical job | Dashboard / report canvases, Chart.js plugins | Inline marks; static RSC with zero client JS |
Orientation only — different jobs. Chart.js via bundlephobia 2026-07-21. microcharts from .size-limit.json (CI).
microcharts numbers come from .size-limit.json, the CI gate, re-measured on every build. The Chart.js figures are
pinned with version and date; they are dated orientation rather than live measurements.
What the canvas decides
There is no markup. A canvas only exists in the browser, so there is no static-HTML output path and the chart appears after JavaScript runs. microcharts renders SVG, so the mark is real DOM: it exists in the server-rendered HTML, prints correctly, and scales crisply at any zoom.
It hydrates. react-chartjs-2 manages the canvas with hooks and effects, so it runs in a client boundary and ships
Chart.js to the browser. The microcharts default export is hook-free static SVG, and an RSC can render it with zero
client JavaScript.
It is a bitmap to assistive technology. The Chart.js docs recommend supplying your own fallback content or ARIA
labeling per chart, and plugins exist to help. That path works; it is manual, once per chart. Every microchart defaults
to role="img" plus a natural-language summary generated from the data.
It repaints through JavaScript. Inline marks sit next to your text, so they inherit its rhythm. SVG takes CSS custom
properties, currentColor, and container-relative sizing directly. A canvas has to redraw when the theme flips.
When Canvas is the right renderer
- Dashboard or report canvases with many series and heavy point counts. Above a few thousand points, canvas usually wins
- You already run Chart.js configs or depend on its plugin ecosystem
- Canvas rendering is a requirement, not an implementation detail
When the mark is inline
- It lives in prose, cells, tabs, KPI cards, or streamed AI replies
- You want the chart present in server-rendered HTML, with zero client JS by default
- You want an accessible name without per-chart wiring
- Per-mark budget: ~2–7 kB interactive · ~1–4 kB static gzip, zero runtime dependencies
Next
- Full chart libraries — Recharts and Chart.js in one view
- microcharts vs Recharts
- When to use microcharts
- Accessibility — what the defaults do
microcharts vs Recharts — inline charts comparison
A measured comparison of Recharts and microcharts for one job: a chart small enough to sit in a sentence, a table cell, or a KPI card.
microcharts vs react-sparklines — React sparkline comparison
How react-sparklines, last published in 2017, compares with microcharts on size, accessibility, Server Components, and scope, plus the code to move a chart from one to the other.