React micro box chart — distribution summary as a word-sized box plot. Tiny accessible SVG microchart; RSC-safe static or /interactive.

MicroBox answers "what are the p50 and spread of this metric?" — the five-number summary in a table row. Min-max whiskers by default (Tukey fences imply a normality assumption most product data doesn't meet); tukey mode exposes fence-breakers as dots.

MicroBox

interactive · 5.2 kB · static · 2.85 kB

Install

Import & usereact/micro-box

import { MicroBox } from "@microcharts/react/micro-box";<MicroBox stats={{ min: 12, q1: 35, median: 42, q3: 51, max: 96 }} title="p95 latency" />

Needs package + stylesheetSet up with AI

Try it

When to use it

Good for — latency percentile rows (p50/p95/p99), spread beside a stat — precomputed stats is the production path.
Avoid for — distribution shape (HistogramStrip) or fewer than 5 observations (renders honest dots).

Sizing

Variants

tukey outliers

Edge cases

too few observations

all-equal values

Four homes

Why this default

Never a box from fewer than 5 observations — dots at the raw values instead. Precomputed stats with non-monotonic values are refused with a dev warning: garbage in must not render a plausible-looking lie. Outlier dots cap at 3 per side (the furthest).

Accessibility

The accessible name is the five-number reading — "Median 50.5, middle half 45.25 to 55.75, range 40 to 500." The interactive entry roves a fixed 5-stop model (min → Q1 → median → Q3 → max), announcing each stat ("Median: 42.").

The interactive entry follows the shared interaction contract: arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape. On touch, a tap pins and a drag scrubs.

Props

Prop	Type	Notes
data	number[]	Raw observations (exclusive with stats).
stats	{ min; q1; median; q3; max }	Precomputed server aggregates.
whiskers	"minmax" \| "tukey"	Tukey exposes outliers as dots.
outliers	boolean	Render outlier dots in tukey mode.
animate	boolean	interactiveOpt-in entrance motion when the chart mounts client-side — add `import "@microcharts/react/motion"` once. Inert on the server, on hydrated server HTML, and under `prefers-reduced-motion`.

Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.