Skip to main content

Heatmap

Grid heatmap with tiered accent fills and on-accent text on peak cells. Suited for hour-of-day or bucketed activity summaries.

24-hour UTC grid

Time of day (UTC, 30 days)

Busiest hour: 10:00 UTC (62 events). Darker cells mean more activity.

Low activity

Quiet afternoon

Busiest: 15 (3 events). Darker cells mean more activity.

Empty state

No events recorded yet.

Custom description

Weekday mornings

Peak traffic clusters around 09:00–11:00 UTC on workdays.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
modeOptional"light" | "dark"lightColor mode.
titleOptionalstringOptional heading above the grid.
descriptionOptionalstringCustom subtitle; omit to use auto peak summary.
cellsOptionalHeatmapCell[]id, value, label (shown in cell), optional title tooltip.
emptyLabelOptionalstringNo data yet.Shown when all values are zero.
showPeakSummaryOptionalbooleantrueAuto busiest-cell line when description is omitted.
peakSummaryOptional(peak) => stringFormatter for the auto peak line.
ariaLabelOptionalstringAccessible name for the grid region.