ComponentsCharts

Heatmap

Density patterns as tinted cells: a calendar (weeks × weekdays — publishing, activity, attendance) or a matrix (weekday × hour, department × month). Sequential, diverging and categorical scales; an ARIA grid with full keyboard support and a data-table alternative. Plain DOM — no chart library.

charts/heatmap.tsx, charts/chart-shell.tsxtheme · material · accent · density · font
Sun
Mon
Tue
Wed
Thu
Fri
Sat

Nov 11, 2025 – Nov 10, 2026. 513 in total; busiest day Monday, December 22, 2025 with 6.

Posts published, last 12 months
DatePosts
Nov 16, 20250
Nov 23, 20250
Nov 30, 20250
Dec 7, 20250
Dec 14, 20250
Dec 21, 20250
Dec 28, 20250
Jan 4, 20261
Jan 11, 20260
Jan 18, 20260
Jan 25, 20260
Feb 1, 20260
Feb 8, 20260
Feb 15, 20260
Feb 22, 20260
Mar 1, 20260
Mar 8, 20261
Mar 15, 20260
Mar 22, 20260
Mar 29, 20260
Apr 5, 20260
Apr 12, 20260
Apr 19, 20260
Apr 26, 20260
May 3, 20260
May 10, 20261
May 17, 20260
May 24, 20260
May 31, 20260
Jun 7, 20260
Jun 14, 20260
Jun 21, 20260
Jun 28, 20260
Jul 5, 20260
Jul 12, 20261
Jul 19, 20260
Jul 26, 20260
Aug 2, 20260
Aug 9, 20260
Aug 16, 20260
Aug 23, 20260
Aug 30, 20260
Sep 6, 20260
Sep 13, 20261
Sep 20, 20260
Sep 27, 20260
Oct 4, 20260
Oct 11, 20260
Oct 18, 20260
Oct 25, 20260
Nov 1, 20260
Nov 8, 20260
Nov 17, 20254
Nov 24, 20252
Dec 1, 20250
Dec 8, 20254
Dec 15, 20251
Dec 22, 20256
Dec 29, 20253
Jan 5, 20260
Jan 12, 20265
Jan 19, 20262
Jan 26, 20266
Feb 2, 20263
Feb 9, 20260
Feb 16, 20264
Feb 23, 20261
Mar 2, 20264
Mar 9, 20262
Mar 16, 20260
Mar 23, 20262
Mar 30, 20261
Apr 6, 20262
Apr 13, 20261
Apr 20, 20260
Apr 27, 20260
May 4, 20260
May 11, 20260
May 18, 20260
May 25, 20260
Jun 1, 20260
Jun 8, 20260
Jun 15, 20261
Jun 22, 20261
Jun 29, 20260
Jul 6, 20262
Jul 13, 20261
Jul 20, 20263
Jul 27, 20262
Aug 3, 20260
Aug 10, 20264
Aug 17, 20261
Aug 24, 20266
Aug 31, 20263
Sep 7, 20260
Sep 14, 20265
Sep 21, 20262
Sep 28, 20266
Oct 5, 20263
Oct 12, 20260
Oct 19, 20264
Oct 26, 20261
Nov 2, 20265
Nov 9, 20262
Nov 11, 20250
Nov 18, 20253
Nov 25, 20251
Dec 2, 20255
Dec 9, 20253
Dec 16, 20250
Dec 23, 20254
Dec 30, 20252
Jan 6, 20266
Jan 13, 20263
Jan 20, 20260
Jan 27, 20265
Feb 3, 20261
Feb 10, 20266
Feb 17, 20263
Feb 24, 20260
Mar 3, 20263
Mar 10, 20261
Mar 17, 20263
Mar 24, 20261
Mar 31, 20260
Apr 7, 20261
Apr 14, 20260
Apr 21, 20261
Apr 28, 20260
May 5, 20260
May 12, 20260
May 19, 20260
May 26, 20260
Jun 2, 20260
Jun 9, 20260
Jun 16, 20261
Jun 23, 20260
Jun 30, 20262
Jul 7, 20261
Jul 14, 20260
Jul 21, 20262
Jul 28, 20261
Aug 4, 20264
Aug 11, 20262
Aug 18, 20260
Aug 25, 20264
Sep 1, 20262
Sep 8, 20266
Sep 15, 20263
Sep 22, 20260
Sep 29, 20265
Oct 6, 20262
Oct 13, 20266
Oct 20, 20263
Oct 27, 20260
Nov 3, 20264
Nov 10, 20261
Nov 12, 20253
Nov 19, 20252
Nov 26, 20250
Dec 3, 20254
Dec 10, 20251
Dec 17, 20256
Dec 24, 20253
Dec 31, 20250
Jan 7, 20265
Jan 14, 20262
Jan 21, 20266
Jan 28, 20263
Feb 4, 20260
Feb 11, 20264
Feb 18, 20261
Feb 25, 20265
Mar 4, 20262
Mar 11, 20260
Mar 18, 20262
Mar 25, 20261
Apr 1, 20262
Apr 8, 20261
Apr 15, 20260
Apr 22, 20261
Apr 29, 20260
May 6, 20260
May 13, 20260
May 20, 20260
May 27, 20260
Jun 3, 20260
Jun 10, 20260
Jun 17, 20260
Jun 24, 20260
Jul 1, 20261
Jul 8, 20261
Jul 15, 20263
Jul 22, 20262
Jul 29, 20260
Aug 5, 20263
Aug 12, 20261
Aug 19, 20265
Aug 26, 20263
Sep 2, 20260
Sep 9, 20265
Sep 16, 20262
Sep 23, 20266
Sep 30, 20263
Oct 7, 20260
Oct 14, 20264
Oct 21, 20261
Oct 28, 20265
Nov 4, 20262
Nov 13, 20253
Nov 20, 20251
Nov 27, 20254
Dec 4, 20252
Dec 11, 20250
Dec 18, 20254
Dec 25, 20252
Jan 1, 20266
Jan 8, 20263
Jan 15, 20260
Jan 22, 20265
Jan 29, 20262
Feb 5, 20266
Feb 12, 20263
Feb 19, 20260
Feb 26, 20263
Mar 5, 20261
Mar 12, 20264
Mar 19, 20262
Mar 26, 20260
Apr 2, 20261
Apr 9, 20260
Apr 16, 20261
Apr 23, 20260
Apr 30, 20260
May 7, 20260
May 14, 20260
May 21, 20260
May 28, 20260
Jun 4, 20260
Jun 11, 20260
Jun 18, 20260
Jun 25, 20261
Jul 2, 20261
Jul 9, 20260
Jul 16, 20262
Jul 23, 20261
Jul 30, 20264
Aug 6, 20262
Aug 13, 20260
Aug 20, 20264
Aug 27, 20261
Sep 3, 20266
Sep 10, 20263
Sep 17, 20260
Sep 24, 20265
Oct 1, 20262
Oct 8, 20266
Oct 15, 20263
Oct 22, 20260
Oct 29, 20264
Nov 5, 20261
Nov 14, 20252
Nov 21, 20250
Nov 28, 20253
Dec 5, 20251
Dec 12, 20255
Dec 19, 20253
Dec 26, 20250
Jan 2, 20265
Jan 9, 20262
Jan 16, 20266
Jan 23, 20263
Jan 30, 20260
Feb 6, 20264
Feb 13, 20261
Feb 20, 20265
Feb 27, 20262
Mar 6, 20260
Mar 13, 20263
Mar 20, 20261
Mar 27, 20262
Apr 3, 20261
Apr 10, 20260
Apr 17, 20261
Apr 24, 20260
May 1, 20260
May 8, 20260
May 15, 20260
May 22, 20260
May 29, 20260
Jun 5, 20260
Jun 12, 20260
Jun 19, 20260
Jun 26, 20261
Jul 3, 20260
Jul 10, 20262
Jul 17, 20261
Jul 24, 20260
Jul 31, 20263
Aug 7, 20261
Aug 14, 20265
Aug 21, 20263
Aug 28, 20260
Sep 4, 20265
Sep 11, 20262
Sep 18, 20266
Sep 25, 20263
Oct 2, 20260
Oct 9, 20265
Oct 16, 20261
Oct 23, 20265
Oct 30, 20263
Nov 6, 20260
Nov 15, 20250
Nov 22, 20250
Nov 29, 20251
Dec 6, 20250
Dec 13, 20250
Dec 20, 20250
Dec 27, 20250
Jan 3, 20260
Jan 10, 20260
Jan 17, 20260
Jan 24, 20260
Jan 31, 20261
Feb 7, 20260
Feb 14, 20260
Feb 21, 20260
Feb 28, 20260
Mar 7, 20260
Mar 14, 20260
Mar 21, 20260
Mar 28, 20260
Apr 4, 20261
Apr 11, 20260
Apr 18, 20260
Apr 25, 20260
May 2, 20260
May 9, 20260
May 16, 20260
May 23, 20260
May 30, 20260
Jun 6, 20261
Jun 13, 20260
Jun 20, 20260
Jun 27, 20260
Jul 4, 20260
Jul 11, 20260
Jul 18, 20260
Jul 25, 20260
Aug 1, 20260
Aug 8, 20261
Aug 15, 20260
Aug 22, 20260
Aug 29, 20260
Sep 5, 20260
Sep 12, 20260
Sep 19, 20260
Sep 26, 20260
Oct 3, 20260
Oct 10, 20261
Oct 17, 20260
Oct 24, 20260
Oct 31, 20260
Nov 7, 20260

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Heatmap } from "@vamos-ui/react/charts";

<Heatmap mode="calendar" title="Posts published" data={[{ x: "2026-11-10", value: 3 }]} valueLabel="Posts" />

Keyboard: arrows move (calendar: up/down = day, left/right = week), Home / End jump within a row, PageUp / PageDown move a month (calendar) or to the column ends (matrix).

Each cell is labelled in full ("Tuesday, November 10, 2026: 3 posts"); the visual tooltip is decorative.

In glass mode the lightest step uses --track so it does not vanish into a translucent card.

Examples

Weekday × hour (CRM)

Best call hours. Seven steps from chart-2.

Answered calls by weekday and hour
08:0009:0010:0011:0012:0013:0014:0015:0016:0017:0018:0019:00
Mon
Tue
Wed
Thu
Fri
Sat
Sun

Highest: Mon, 11:00 with 43. Lowest: Mon, 19:00 with 0.

Answered calls by weekday and hour
Answered calls by weekday and hour08:0009:0010:0011:0012:0013:0014:0015:0016:0017:0018:0019:00
Mon1228364331233233221230
Tue1330373432252634231331
Wed1323393634262736251041
Thu1425413827272928261141
Fri1526334029283030271231
Sat356854664210
Sun257664664210

Diverging (finance)

scale="diverging": danger ↔ neutral ↔ success around zero, symmetric domain.

Budget variance by department
JunJulAugSepOctNov
Engineering
Sales
Marketing
Support
Operations

Highest: Marketing, Sep with 15%. Lowest: Marketing, Jun with -18%.

Budget variance by department
Budget variance by departmentJunJulAugSepOctNov
Engineering-4%2%-6%-8%1%-3%
Sales12%7%-2%-5%-11%-9%
Marketing-18%-9%4%15%6%-1%
Support3%1%-0%-2%5%8%
Operations-7%-12%-5%2%-3%-4%

Attendance states (HR)

scale="categorical" colours each cell by its category; fixed cellSize scrolls when wider.

Mon
Tue
Wed
Thu
Fri
Sat
Sun

Sep 28, 2026 – Nov 8, 2026. 30 in total; busiest day Monday, September 28, 2026 with 1.

Attendance, Elif Demir
DateValue
Sep 28, 2026Office
Oct 5, 2026Office
Oct 12, 2026Office
Oct 19, 2026Annual leave
Oct 26, 2026Office
Nov 2, 2026Office
Sep 29, 2026Office
Oct 6, 2026Office
Oct 13, 2026Office
Oct 20, 2026Office
Oct 27, 2026Office
Nov 3, 2026Office
Sep 30, 2026Remote
Oct 7, 2026Remote
Oct 14, 2026Remote
Oct 21, 2026Remote
Oct 28, 2026Sick
Nov 4, 2026Remote
Oct 1, 2026Office
Oct 8, 2026Office
Oct 15, 2026Annual leave
Oct 22, 2026Office
Oct 29, 2026Office
Nov 5, 2026Office
Oct 2, 2026Remote
Oct 9, 2026Remote
Oct 16, 2026Annual leave
Oct 23, 2026Remote
Oct 30, 2026Remote
Nov 6, 2026Remote

API

Heatmap

PropTypeDefault
mode
Weeks × weekdays, or rows × columns.
"calendar" | "matrix"—
data
Calendar: x is "YYYY-MM-DD". Matrix: x = column, y = row.
{ x, y?, value, category?, meta? }[]—
title
Grid name and table caption.
string—
range
Calendar range. Default: first to last date in data.
{ from, to }—
xLabels / yLabels
Matrix order. Default: order of appearance.
string[]—
scale
Colour scale.
"sequential" | "diverging" | "categorical""sequential"
categories
Categorical palette.
{ value, label, color }[]—
steps
Colour steps (5 + chart-1 uses --chart-seq-0…4).
4 | 5 | 75
domain
Linear breaks. Default: quantile breaks.
[number, number]—
color
Sequential base colour.
ChartColor"chart-1"
format / valueLabel
Value format and the measured thing ("Posts").
FormatSpec / string—
weekStart
Override the locale week start (Sunday en-US, Monday tr-TR).
0–6—
today
Ringed day. Default: today in the provider time zone, after mount.
string | null—
cellSize
Fill the width, or fixed px with horizontal scroll.
"auto" | number"auto"
tooltip
Custom tooltip content.
(cell) => ReactNode—
onCellClick
Click or Enter / Space on a cell.
(cell) => void—
tableToggle / state / summary / showLegend
As Chart frame; legend reads Less ↔ More.
——
labels
heatmap namespace: less, more, cell, noData, date, value, summaries.
Partial<HeatmapLabels>—
Previous
Gauge & Progress ring
Next
Hero