MicroBox
MicroBox shows median, quartiles, and whisker range as a word-sized box plot in a table row.
- encodes
- box span (IQR) + median tick position
- precision
- high for the five numbers
- nodes
- ≤ 4 (+ ≤ 3 outlier dots/side in tukey)
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.
Install
import { MicroBox } from "@microcharts/react/micro-box";<MicroBox stats={{ min: 12, q1: 35, median: 42, q3: 51, max: 96 }} title="p95 latency" />Try it
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
Variants
Edge cases
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
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 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.