Heatmap
Charts
Analytics
Visualize activity patterns, calendar density, and matrix data with color-coded cells.
Preview
GitHub-style contribution calendar
Contribution Activity
Your activity over the past year
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
Jan
Feb
Mar
Mon
Wed
Fri
LessMore
Activity Matrix
Time-based activity patterns across days and hours
Activity by Time
Task completion patterns
Sun
Mon
Tue
Wed
Thu
Fri
Sat
12a
3a
6a
9a
12p
3p
6p
9p
LessMore
Focus Time
Deep work distribution
Sun
Mon
Tue
Wed
Thu
Fri
Sat
12a
3a
6a
9a
12p
3p
6p
9p
LessMore
Color Scales
Available color palettes
green
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
blue
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
purple
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
indigo
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
amber
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
red
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
teal
Sun
Mon
Tue
Wed
Thu
12a
3a
6a
9a
12p
3p
6p
9p
Props
Component API reference
Heatmap
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { x: string; y: string; value: number }[] | — | Data points with x, y, and value |
xLabels* | string[] | — | X-axis labels |
yLabels* | string[] | — | Y-axis labels |
colorScale | string | 'green' | Color palette name |
cellSize | number | 32 | Cell size in pixels |
cellGap | number | 4 | Gap between cells |
cellRadius | number | 4 | Cell border radius |
formatValue | (v: number) => string | — | Value formatter for tooltips |
showLegend | boolean | true | Show color legend |
showTooltip | boolean | true | Show value tooltips |
CalendarHeatmap
| Prop | Type | Default | Description |
|---|---|---|---|
data* | { date: string; value: number }[] | — | Data with date and value |
startDate | string | — | Start date for display range |
endDate | string | — | End date for display range |
showMonthLabels | boolean | true | Show month labels |
Usage
Import and implementation examples
import { Heatmap, CalendarHeatmap, HeatmapCard } from '@/blocks/charts/heatmap'
// Calendar Heatmap (GitHub-style)
<CalendarHeatmap
data={[
{ date: '2024-01-15', value: 5 },
{ date: '2024-01-16', value: 8 },
]}
colorScale="green"
cellSize={12}
/>
// Matrix Heatmap
<Heatmap
data={[
{ x: '12a', y: 'Mon', value: 45 },
{ x: '12a', y: 'Tue', value: 32 },
]}
xLabels={['12a', '6a', '12p', '6p']}
yLabels={['Mon', 'Tue', 'Wed']}
colorScale="indigo"
cellSize={32}
formatValue={(v) => `${v} sessions`}
/>
// In a card wrapper
<HeatmapCard title="Activity" subtitle="Past 30 days">
<CalendarHeatmap data={data} />
</HeatmapCard>Features
Built-in functionality
- 7 color scales: Green, blue, purple, indigo, amber, red, teal
- Interactive tooltips: Hover to see cell values
- Calendar layout: GitHub-style contribution calendar
- Matrix layout: Custom x/y axis labels
- Customizable cells: Adjust size, gap, and radius
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses role="grid" for matrix structureCells have aria-label with valuesLegend describes color meaningKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Heatmap is not keyboard interactive |
Notes
- Tooltips provide exact values
- Color intensity conveys relative values
- Consider providing data table for screen readers