HistogramStrip
HistogramStrip turns raw observations into up to 12 uniform, zero-anchored bins for a distribution read at word size.
- encodes
- bar height per uniform bin
- precision
- medium (bin-level)
- nodes
- 1 per bin (≤ 12)
HistogramStrip sorts raw observations into uniform bins and draws the counts zero-anchored, never density-smoothed, so a distribution's mode, spread, and skew read off one strip. The bin count is √n capped at 12: enough shape to see skew, few enough bars to survive 60 px. 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
Use it for latency clusters in a sentence and distributions per table row. For raw marks use RugStrip; for a series over time, Sparkline.
Sizing
Variants
markValue marks the bin its value falls in and never re-bins around it.
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 an equal-width binner would draw for a
zero-span domain, and an explicit bins count collapses to the observation count when you ask for more bins than you
have values.
Four homes
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.