Heatmap

Density cells whose fill encodes each value. Pass calendar for a GitHub-style contribution graph: seven-day week columns with weekday and month labels, discrete less-to-more levels, and press or hover to inspect a day's count and date. The calendar layout IS the kit's activity calendar, so a contribution graph needs no separate component.
Less
More
iOS
Less
More
Android
Less
More
Web
tsx
<Container xs>
<Heatmap values={[0.15, 0.4, 0.7, 1, 0.55, 0.25, 0.85, 0.35, 0.6, 0.9, 0.2, 0.5, 0.75, 0.3, 0.95, 0.45, 0.65, 0.1, 0.8, 0.4, 0.7]} />
</Container>

Props

Prop
Description
values
required
HeatmapValue[]
The cells: intensities 0–1, or `{ value, count?, date?, label? }` for inspectable data.
label
string
What the grid measures (e.g. "Contribution activity"); leads the accessible name.
calendar
boolean
GitHub-style: lay the cells into seven-row week columns with weekday + month labels.
caption
string
A summary line above the grid (e.g. "248 contributions in the last year").
hideLegend
boolean
Hide the less-to-more legend row.
testID
string
E2E hook forwarded to the root element.
style
LayoutStyle
For sizing/composition only.

Do & Don’t

Heatmap

Don’t
A density grid with no legend leaves the alpha-to-value mapping a mystery.
Do
Less
More
Pair the grid with a discrete less-to-more legend so the density scale is legible.
← GeoMap
Histogram →