Heatmap

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

Playground

Every control sets a real prop of HeatmapProps. The JSX below updates as you go.
Less
More
Props
calendar
boolean
hideLegend
boolean
label
string
JSX · HeatmapProps
<Heatmap calendar label="Commits" />

Variants

1 examples from src/charts/heatmap/heatmap.md, each rendered live from its own JSX.
Less
More
Calendar
<Heatmap
calendar
label="Contribution activity"
values={Array.from({ length: 371 }, (_, i) => {
const noise = Math.sin(i * 12.9898) * 43758.5453;
const r = noise - Math.floor(noise);
const value = r < 0.5 ? 0 : (r - 0.5) / 0.5;
return { value, count: Math.round(value * 14), date: new Date(Date.UTC(2025, 6, 6 + i)).toISOString().slice(0, 10) };
})}
/>

Anatomy

Less
More
1
Grid
2
Cell
3
Title
4
Legend
Dimmed parts appear only in some states or variants.

Props

8 props on HeatmapProps, grouped as they are declared in source. Required props are marked *.
Prop
Type
Default
Description
Props
8 props
values *
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
false
GitHub-style: lay the cells into seven-row week columns with weekday + month labels.
detailed
boolean
false
Fixed-size contribution calendar with the authored month, weekday and level styling.
caption
string
–
A summary line above the grid (e.g. "248 contributions in the last year").
hideLegend
boolean
false
Hide the less-to-more legend row.
testID
string
–
E2E hook forwarded to the root element.
style
LayoutStyle
–
For sizing/composition only.

Accessibility and keyboard

Keyboard
Tab
Focuses the plot
ArrowLeft
ArrowRight
Steps through points when inspectable
Escape
Clears the inspected point
Semantics
Roles
image
ARIA on web
aria-label

Platform skins

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

Usage

<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>

Tokens

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

Related components