MicroBox shows median, quartiles, and whisker range as a word-sized box plot in a table row.

MicroBox prints a five-number summary in a table row: min, Q1, median, Q3, max. Whiskers run to the min and max by default, because Tukey fences imply a normality assumption most product data doesn't meet. whiskers="tukey" switches to those fences and exposes fence-breakers as dots, capped at 3 per side (the furthest). Precomputed stats whose values aren't monotonic are refused with a dev warning rather than drawn as a plausible-looking box.

MicroBox

interactive · 5.27 kB · static · 2.83 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

Live playground

onActive

idle

—

hover · rove · click…

Hover or arrow through the five stops — min, Q1, median, Q3, max.

whiskers

extra outlier value

outlier dots

readout

animate

import { MicroBox } from "@microcharts/react/micro-box/interactive";// latencies — real values under “Sample data” below<MicroBox  data={latencies}/>

Sample data

const latencies = [12, 30, 35, 38, 42, 45, 48, 51, 60, 96]; // ms, raw observations

When to use it

Use it for latency percentile rows (p50/p95/p99) and spread beside a stat; precomputed stats is the production path. For distribution shape use HistogramStrip. Fewer than 5 observations render as dots rather than a box.

Sizing

precomputed stats (production path)

shared domain rows

Variants

tukey outliers

Edge cases

too few observations

all-equal values

Under 5 observations MicroBox draws the raw values as dots, never a box built from too few of them. An all-equal series has a degenerate IQR: the box collapses to a 1-unit tick, and the domain pads ±1 around the value so the mark stays centered and visible.

Four homes

In a sentence

Checkout latency this week — median 110ms, but the tail stretched past 300ms.

In a table cell

/search		42 ms
/checkout		110 ms
/profile		18 ms

In a KPI card

p95 latency

42 msmedian, IQR 35–51

In a tab header

ProdCanary

Preview uses the public chart API only. When an interactive twin exists, it swaps in with the same props and no entrance motion - code samples stay on the static import. Placement recipes: Composition, Sizing.

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) and announces 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, press Escape, or press outside the chart. 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.