microcharts vs visx — tiny charts comparison
visx gives you primitives to build a chart and microcharts gives you finished word-sized marks; this page measures a minimal visx sparkline and lists what each approach makes you responsible for.
visx is Airbnb's collection of low-level visualization primitives: shapes, scales, axes, and gradients you compose into your own charts. It is deliberately not a chart library. You are the chart library. microcharts makes the opposite bet: finished, opinionated word-sized marks with the design decisions already made.
So this is a fork in the road rather than a competition. Both keep bundles lean through per-package (visx) or per-chart (microcharts) imports. What you are choosing is who does the chart design, you or the library. The sections below list what each choice makes you responsible for.
The numbers
| Signal | visx 4.0.0 (minimal sparkline) | microcharts Sparkline |
|---|---|---|
| Gzip for one sparkline | ~16.3 kB (@visx/shape + @visx/scale) | 4.25 kB static · 6.94 kB interactive |
| What you get | primitives — you compose the chart | a finished, opinionated mark |
| Runtime dependencies | 5 in @visx/shape (incl. vendored d3) | 0 (React is a peer) |
| Accessible name | yours to author (LinePath renders a bare <path>) | role="img" + summary from the data |
| Design decisions | all yours — full control | made for you — word-sized defaults |
visx size via esbuild bundle of LinePath + scaleLinear, react external, minify+gzip 2026-07-23. microcharts from .size-limit.json (CI).
The visx figure is a floor: LinePath plus one scale, before curves, tooltips, or axes. It is a dated pin for that one
minimal composition, not a benchmark of visx overall, and 16 kB is a reasonable floor for hand-built charts. Each
@visx/* package you add brings its own dependencies (d3 arrives vendored through @visx/vendor).
Three things you own with visx
The design. You decide geometry, padding, label placement, empty-data behavior, negative-value handling, and color semantics per chart. That is full control, and a real design task at 16 pixels tall. microcharts hard-codes those decisions: areas anchor at zero, direction is never color-alone, labels reserve deterministic gutters, empty and all-null data render documented placeholders.
Accessibility. A visx LinePath renders a bare <path>, so role, <title>, and a description of the data are
yours to author on every chart you build. Every microchart defaults to role="img" with a natural-language summary
generated from the data.
Edge cases. NaN, ±Infinity, single points, all-equal series: with primitives, each is your code path. Every microchart documents and tests these in a shared fixture suite.
Dependencies
visx keeps React in control of the DOM and slices d3 into per-package imports, which is genuinely lighter than shipping
all of d3, and its modularity is well executed. microcharts goes further for its narrower job: scales, paths, easing,
color, and summaries are in-house, so dependencies: {} is a CI-enforced invariant.
Build it yourself with visx
A bespoke visualization deserves primitives, so reach for visx when:
- The visualization is bespoke and no catalog anywhere has your chart
- You have design capacity and want d3's power with React's rendering
- You are building your organization's own charting layer, at any surface size
Take the catalog with microcharts
- The chart you need already exists: 106 word-sized types, one grammar
- You want accessibility, edge cases, and design handled by default
- You want static RSC output with zero client JavaScript, at ~2–7 kB interactive · ~1–4 kB static gzip per chart
Next
- When to use microcharts
- Design notes — the decisions microcharts makes for you
- microcharts vs Recharts
- Composition — placing marks in real surfaces