BenchmarkStrip
One value against its peer group's own empirical quantile bands, with the percentile stated in the summary.
- encodes
- position on a common scale against an empirical band
- precision
- high — percentile stated
- nodes
- ≤ 6
BenchmarkStrip reads one value against a list of peer values: a focal dot on a common scale, placed against the peers' own empirical quantile bands, so you can tell whether the value is ordinary for that cohort or out at the tail. The bands come from the measured peers and never from a fitted distribution, so the strip never implies a normal curve the data doesn't back up. There is no axis: the band is the reference frame, and the dot's position in it is the whole read.
Install
import { BenchmarkStrip } from "@microcharts/react/benchmark-strip";// peerLatencies — real values under “Sample data” below<BenchmarkStrip data={peerLatencies} value={312} format={{ style: "unit", unit: "millisecond" }} title="Latency vs peers" />Sample data
// 42 peer latencies (ms)const peerLatencies = [180, 201, 237, 286, 341, 396, 443, 394, 412, 413, 398, 372, 340, 310, 205, 196, 205, 230, 271, 322, 378, 347, 391, 421, 434, 430, 412, 383, 268, 239, 221, 218, 231, 261, 306, 275, 331, 382, 422, 447, 455, 447];Try it
When to use it
Use it for a value against its cohort, per-row peer comparison in tables, and SLA context. For a single trend use Sparkline; for two groups head-to-head use ABStrips.
Sizing
Variants
format also takes Intl.NumberFormatOptions — with a locale, both the right-gutter label and the accessible
summary's numbers follow that locale's own grouping and decimal marks: the value above reads "1.240" in German, not
"1,240".
Edge cases
Below 8 peers, tail quantiles (p5/p95) are statistically unreliable, so the outer band falls back to the observed
min–max automatically; range forces either band at any sample size. A value outside the plotted domain clamps to the
edge and draws a small directional wedge instead of disappearing.
Four homes
Accessibility
The accessible name states the value, its percentile, the peer count, and the middle-half interval — "312 — 43rd percentile of 42 peers (middle half 244.5–408.5)." A flat cohort states it plainly instead: "52 — all 8 peers at 50." The interactive entry roves the five quantile edges with ←/→, announcing each edge's name and value (e.g. "p75: 408.5.").
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[] | Peer values. |
| value* | number | The focal reading. |
| range | "p5p95" | "minmax" | Outer band; minmax for small samples. |
| label | "value" | "percentile" | "none" | What the right gutter states (default percentile). |
| positive | "up" | "down" | Which side of the band is good (colors the focal dot). |
| median | boolean | Center tick (default true). |
| 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.