# microcharts vs Chart.js for inline charts (/docs/vs-chartjs)

[Chart.js](https://www.chartjs.org) is a Canvas-first chart library with a large plugin ecosystem, usually wrapped by
[`react-chartjs-2`](https://react-chartjs-2.js.org) 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](/docs/when-to-use) and [Full chart libraries](/docs/full-chart-libraries).

## The numbers

<VsChartJsTable />

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: <SizeMarketing /> gzip, zero runtime dependencies

## Next

- [Full chart libraries](/docs/full-chart-libraries) — Recharts and Chart.js in one view
- [microcharts vs Recharts](/docs/vs-recharts)
- [When to use microcharts](/docs/when-to-use)
- [Accessibility](/docs/accessibility) — what the defaults do