Histogram

An auto-binned frequency distribution: pass raw sample values and the chart bins them into nice-edged uniform buckets (Sturges' rule by default, bins to override) and draws contiguous bars on a numeric axis. Press or scrub a bar to inspect its range and count. The accessible name lists every bin with its bounds and tally.
Response times
iOS
Response times
Android
Response times
Web
tsx
<Histogram
title="Response times"
label="Latency ms"
values={[42, 38, 51, 44, 47, 39, 58, 62, 44, 41, 49, 53, 46, 43, 71, 48]}
/>

Props

Prop
Description
values
required
number[]
Raw sample values; the chart bins them.
bins
number
Bucket count override. Defaults to Sturges' rule on the sample size.
title
string
Optional heading shown above the plot.
label
string
Names the distribution (e.g. "Response times"); leads the accessible name.
success
boolean
Tone (pick one; default primary). Precedence: success > destructive.
destructive
boolean
Tone (pick one; default primary). Precedence: success > destructive.
compact
boolean
Density (omit for the default plot size).
hideGrid
boolean
Furniture visibility.
hideAxes
boolean
Furniture visibility.
formatValue
(v: number) => string
Formats bin edges in ticks, the flag, and the accessible name.
selected
number | null
Press-to-inspect: the selected bin index (controlled). Pass null for none.
defaultSelected
number
Press-to-inspect: the initially selected bin (uncontrolled).
onSelect
(index: number | null) => void
Fired when a press selects a bin (or clears it with null).
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
Composition within a parent only, never a restyle hook and never a width: the parent layout container provides the bounds.

Do & Don’t

Histogram

Don’t
small
medium
large
Pre-bucketing the samples into a bar Chart throws away the distribution's edges and the inspectable ranges.
Do
Response times
Hand the chart raw samples and let it choose nice bin edges.
← Heatmap
LineChart →