Heatmap
Calendar contribution heatmap and weekday × hour matrix with a muted-to-ember scale, legend, roving-focus cells and tooltips.
Preview
Pages drafted, May – October 2026
Current streak · 15 days775 pages in 26 weeks
Deploys by hour
Last 90 days, UTCQuiet after Friday 15:00
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Name of the grid. |
| rows | { label: string; short?: string }[] | — | Heatmap: row headers; short is the visible text ("" hides it). |
| columns | { label: string; short?: string }[] | — | Heatmap: column headers. |
| values | (number | null)[][] | — | Heatmap: values as [row][column]; null means no data. |
| data | { date: string; value: number }[] | — | CalendarHeatmap: one entry per ISO day; missing days count as zero. |
| weekStartsOn | 0 | 1 | 1 | CalendarHeatmap: first day of the week (Sunday or Monday). |
| unit | string | "contributions" | CalendarHeatmap: unit in cell labels. |
| max | number | largest value | Value of the strongest colour. |
| levels | number | 5 | Colour steps including the empty step. |
| cellSize | number | 14 | Cell size in px. |
| gap | number | 3 | Gap between cells in px. |
| color | string | "var(--chart-2)" | Base colour mixed into --muted. |
| cellLabel | (value, row, column) => string | — | Accessible and tooltip text for a cell. |
| valueFormatter | (value: number) => string | Intl number | Formats values in default labels. |
| legend | boolean | true | Show the Less → More scale. |
| caption | ReactNode | — | Text beside the legend, such as a total. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.