Histogram

Chart
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.
src/charts/histogram
View in Charts

Playground

Every control sets a real prop of HistogramProps. The JSX below updates as you go.
Response times
Props
bins
number
10
Tone
pick one
hideGrid
boolean
compact
boolean
JSX · HistogramProps
<Histogram bins={10} />

Variants

2 examples from src/charts/histogram/histogram.md, each rendered live from its own JSX.
Explicit bins
<Histogram
bins={5}
values={[1, 1, 2, 2, 2, 3, 3, 3, 3, 4, 4, 5, 5, 6, 7, 8, 9, 12, 2, 3, 1, 4, 2, 3, 5]}
/>
Compact, no grid
<Histogram
compact
hideGrid
values={[4.2, 4.8, 5.1, 4.4, 6.2, 5.5, 4.9, 5.0, 4.6, 7.8, 5.2, 4.7, 5.4, 4.3, 5.8]}
/>

Anatomy

Response times
1
Chart frame
2
Bins
3
Axis labels
4
Baseline
5
Gridlines
Dimmed parts appear only in some states or variants.

Props

16 props on HistogramProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
4 props
values *
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.
Tone
pick one
2 props
success
boolean
false
destructive
boolean
false
Density
2 props
compact
boolean
false
plain
boolean
false
Strip the card surface for nesting inside an existing card (mirrors Stats).
Furniture visibility
8 props
hideGrid
boolean
false
Furniture visibility.
hideAxes
boolean
false
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.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
group
image
img
ARIA on web
aria-label
From the docs
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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.
Web
control 10 · field 10 · card 16 · Instrument Sans
iOS
capsule controls · field 8 · card 12 · SF Pro · 44 pt
Android
Material 3 stadium · field 4 · card 12 · Roboto · 48 dp

Usage

<Histogram
title="Response times"
label="Latency ms"
values={[42, 38, 51, 44, 47, 39, 58, 62, 44, 41, 49, 53, 46, 43, 71, 48]}
/>

Tokens

Read from the playground render. Values follow the scheme and the ion hue.
--c1
--fd
--fm
--ft
--ln
--ln2
--sf
--sh-sm
--tx3

Related components