# microcharts vs visx — tiny charts comparison (/docs/vs-visx)

[visx](https://airbnb.io/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

<VsVisxTable />

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: <CatalogTotal /> 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 <SizeMarketing /> gzip per chart

## Next

- [When to use microcharts](/docs/when-to-use)
- [Design notes](/docs/design-notes) — the decisions microcharts makes for you
- [microcharts vs Recharts](/docs/vs-recharts)
- [microcharts vs TanStack Charts](/docs/vs-tanstack-charts) — the same fork, one layer up in the grammar
- [Composition](/docs/composition) — placing marks in real surfaces