HistogramStrip
React histogram strip chart — mode, spread, and skew from raw observations in uniform bins. Tiny accessible SVG microchart; RSC-safe static or /interactive.
HistogramStrip answers "what does the distribution look like?". Raw observations in, ≤ 12 uniform bins out — counts zero-anchored, never density-smoothed. Pre-aggregated counts are not supported; that's SparkBar's contract.
Install
import { HistogramStrip } from "@microcharts/react/histogram-strip";// times — real values under “Sample data” below<HistogramStrip data={times} title="Response times" />Sample data
const times = Array.from({ length: 120 }, (_, i) => i % 3 === 0 ? 40 + (i % 10) : 20 + ((i * 7) % 60),);Try it
When to use it
- Good for — latency clusters in a sentence, distributions per table row.
- Avoid for — raw marks (RugStrip) or series over time (Sparkline).
Sizing
Variants
The accessible summary states the modal bin's edges through format/locale — under de-DE a value like 24000 reads
"24.000" (period as the thousands separator) instead of the English "24,000".
Edge cases
An empty series renders zero bars and an accessible name of "No data." rather than a misleading flat line. A constant series collapses to ONE full-height bin instead of the usual up-to-12 slivers a naive equal-width binner would draw for a zero-span domain.
Four homes
Why this default
Auto bin count is √n capped at 12 — enough shape to see skew, few enough bars to survive 60 px. All values identical
collapse to ONE bin (never twelve slivers); explicit bin counts collapse to the observation count. markValue marks the
bin of a value and never re-bins around it.
Accessibility
The accessible name names the modal bin — "120 values, most between 42.09 and 47.36." The interactive entry roves bins with range announcements ("42.09 to 47.36: 26 values.").
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. |
| bins | number | Bin count; auto = min(12, √n). |
| markValue | number | A VALUE whose bin gets accent. |
| domain | [number, number] | Fixed bin edges across multiples. |
| format | Intl.NumberFormatOptions | fn | Formats the bin edges named in the summary. |
| locale | string | string[] | BCP 47 locale(s) for the formatted bin edges. |
| 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.