Skip to content

Calendar heatmap

Show one daily measure across calendar weeks.

Chart ID: calendarHeatmap. Independent import: @revolist/charts/calendar-heatmap.

Loading chart…

Inspect daily activity in a calendar arrangement. Supply valid date categories; the position comes from the date rather than the input label order.

Supply date-like category values and numeric activity values. The calendar layout uses date positions. The complete example below provides a full year of sample dates.

The roles below describe the chart's data contract. Generic category/value roles resolve from the dataset; explicitly bind specialized numeric roles as shown in the complete example.

Data roleField count
category1 or more
value1 or more
series1

Download the complete sample data and settings (JSON). See Data & Configuration for mapping, null values, updates and lifecycle rules.

Install the package using the installation guide, give the host an explicit height, and call createCalendarHeatmapChart after the host mounts. This factory fixes the chart type to calendarHeatmap.

<div id="chart" style="width: 100%; height: 450px;"></div>
Complete runnable TypeScript example with sample data
import { createCalendarHeatmapChart } from '@revolist/charts/calendar-heatmap';
const container = document.getElementById('chart')!;
const chart = await createCalendarHeatmapChart({
container,
"data": [
{
"date": "2025-01-01",
"activity": 19
},
{
"date": "2025-01-02",
"activity": 20
},
{
"date": "2025-01-03",
"activity": 21
},
{
"date": "2025-01-04",
"activity": 20
},
{
"date": "2025-01-05",
"activity": 20
},
{
"date": "2025-01-06",
"activity": 20
},
{
"date": "2025-01-07",
"activity": 21
},
{
"date": "2025-01-08",
"activity": 22
},
{
"date": "2025-01-09",
"activity": 24
},
{
"date": "2025-01-10",
"activity": 26
},
{
"date": "2025-01-11",
"activity": 27
},
{
"date": "2025-01-12",
"activity": 26
},
{
"date": "2025-01-13",
"activity": 24
},
{
"date": "2025-01-14",
"activity": 21
},
{
"date": "2025-01-15",
"activity": 16
},
{
"date": "2025-01-16",
"activity": 12
},
{
"date": "2025-01-17",
"activity": 9
},
{
"date": "2025-01-18",
"activity": 7
},
{
"date": "2025-01-19",
"activity": 6
},
{
"date": "2025-01-20",
"activity": 7
},
{
"date": "2025-01-21",
"activity": 8
},
{
"date": "2025-01-22",
"activity": 9
},
{
"date": "2025-01-23",
"activity": 9
},
{
"date": "2025-01-24",
"activity": 8
},
{
"date": "2025-01-25",
"activity": 7
},
{
"date": "2025-01-26",
"activity": 6
},
{
"date": "2025-01-27",
"activity": 5
},
{
"date": "2025-01-28",
"activity": 5
},
{
"date": "2025-01-29",
"activity": 7
},
{
"date": "2025-01-30",
"activity": 10
},
{
"date": "2025-01-31",
"activity": 14
},
{
"date": "2025-02-01",
"activity": 19
},
{
"date": "2025-02-02",
"activity": 23
},
{
"date": "2025-02-03",
"activity": 25
},
{
"date": "2025-02-04",
"activity": 26
},
{
"date": "2025-02-05",
"activity": 26
},
{
"date": "2025-02-06",
"activity": 24
},
{
"date": "2025-02-07",
"activity": 22
},
{
"date": "2025-02-08",
"activity": 21
},
{
"date": "2025-02-09",
"activity": 21
},
{
"date": "2025-02-10",
"activity": 21
},
{
"date": "2025-02-11",
"activity": 22
},
{
"date": "2025-02-12",
"activity": 22
},
{
"date": "2025-02-13",
"activity": 22
},
{
"date": "2025-02-14",
"activity": 21
},
{
"date": "2025-02-15",
"activity": 18
},
{
"date": "2025-02-16",
"activity": 15
},
{
"date": "2025-02-17",
"activity": 10
},
{
"date": "2025-02-18",
"activity": 6
},
{
"date": "2025-02-19",
"activity": 4
},
{
"date": "2025-02-20",
"activity": 2
},
{
"date": "2025-02-21",
"activity": 3
},
{
"date": "2025-02-22",
"activity": 4
},
{
"date": "2025-02-23",
"activity": 7
},
{
"date": "2025-02-24",
"activity": 9
},
{
"date": "2025-02-25",
"activity": 10
},
{
"date": "2025-02-26",
"activity": 11
},
{
"date": "2025-02-27",
"activity": 11
},
{
"date": "2025-02-28",
"activity": 11
},
{
"date": "2025-03-01",
"activity": 11
},
{
"date": "2025-03-02",
"activity": 12
},
{
"date": "2025-03-03",
"activity": 14
},
{
"date": "2025-03-04",
"activity": 17
},
{
"date": "2025-03-05",
"activity": 20
},
{
"date": "2025-03-06",
"activity": 24
},
{
"date": "2025-03-07",
"activity": 27
},
{
"date": "2025-03-08",
"activity": 29
},
{
"date": "2025-03-09",
"activity": 29
},
{
"date": "2025-03-10",
"activity": 27
},
{
"date": "2025-03-11",
"activity": 24
},
{
"date": "2025-03-12",
"activity": 21
},
{
"date": "2025-03-13",
"activity": 18
},
{
"date": "2025-03-14",
"activity": 17
},
{
"date": "2025-03-15",
"activity": 16
},
{
"date": "2025-03-16",
"activity": 16
},
{
"date": "2025-03-17",
"activity": 16
},
{
"date": "2025-03-18",
"activity": 16
},
{
"date": "2025-03-19",
"activity": 15
},
{
"date": "2025-03-20",
"activity": 12
},
{
"date": "2025-03-21",
"activity": 9
},
{
"date": "2025-03-22",
"activity": 6
},
{
"date": "2025-03-23",
"activity": 3
},
{
"date": "2025-03-24",
"activity": 1
},
{
"date": "2025-03-25",
"activity": 1
},
{
"date": "2025-03-26",
"activity": 3
},
{
"date": "2025-03-27",
"activity": 6
},
{
"date": "2025-03-28",
"activity": 9
},
{
"date": "2025-03-29",
"activity": 13
},
{
"date": "2025-03-30",
"activity": 15
},
{
"date": "2025-03-31",
"activity": 17
},
{
"date": "2025-04-01",
"activity": 18
},
{
"date": "2025-04-02",
"activity": 17
},
{
"date": "2025-04-03",
"activity": 17
},
{
"date": "2025-04-04",
"activity": 18
},
{
"date": "2025-04-05",
"activity": 19
},
{
"date": "2025-04-06",
"activity": 21
},
{
"date": "2025-04-07",
"activity": 24
},
{
"date": "2025-04-08",
"activity": 26
},
{
"date": "2025-04-09",
"activity": 28
},
{
"date": "2025-04-10",
"activity": 28
},
{
"date": "2025-04-11",
"activity": 27
},
{
"date": "2025-04-12",
"activity": 24
},
{
"date": "2025-04-13",
"activity": 20
},
{
"date": "2025-04-14",
"activity": 16
},
{
"date": "2025-04-15",
"activity": 13
},
{
"date": "2025-04-16",
"activity": 10
},
{
"date": "2025-04-17",
"activity": 9
},
{
"date": "2025-04-18",
"activity": 9
},
{
"date": "2025-04-19",
"activity": 10
},
{
"date": "2025-04-20",
"activity": 10
},
{
"date": "2025-04-21",
"activity": 10
},
{
"date": "2025-04-22",
"activity": 9
},
{
"date": "2025-04-23",
"activity": 7
},
{
"date": "2025-04-24",
"activity": 5
},
{
"date": "2025-04-25",
"activity": 4
},
{
"date": "2025-04-26",
"activity": 3
},
{
"date": "2025-04-27",
"activity": 4
},
{
"date": "2025-04-28",
"activity": 7
},
{
"date": "2025-04-29",
"activity": 10
},
{
"date": "2025-04-30",
"activity": 15
},
{
"date": "2025-05-01",
"activity": 19
},
{
"date": "2025-05-02",
"activity": 22
},
{
"date": "2025-05-03",
"activity": 23
},
{
"date": "2025-05-04",
"activity": 24
},
{
"date": "2025-05-05",
"activity": 23
},
{
"date": "2025-05-06",
"activity": 22
},
{
"date": "2025-05-07",
"activity": 21
},
{
"date": "2025-05-08",
"activity": 21
},
{
"date": "2025-05-09",
"activity": 22
},
{
"date": "2025-05-10",
"activity": 23
},
{
"date": "2025-05-11",
"activity": 24
},
{
"date": "2025-05-12",
"activity": 25
},
{
"date": "2025-05-13",
"activity": 24
},
{
"date": "2025-05-14",
"activity": 22
},
{
"date": "2025-05-15",
"activity": 19
},
{
"date": "2025-05-16",
"activity": 14
},
{
"date": "2025-05-17",
"activity": 10
},
{
"date": "2025-05-18",
"activity": 7
},
{
"date": "2025-05-19",
"activity": 5
},
{
"date": "2025-05-20",
"activity": 4
},
{
"date": "2025-05-21",
"activity": 5
},
{
"date": "2025-05-22",
"activity": 6
},
{
"date": "2025-05-23",
"activity": 8
},
{
"date": "2025-05-24",
"activity": 9
},
{
"date": "2025-05-25",
"activity": 9
},
{
"date": "2025-05-26",
"activity": 9
},
{
"date": "2025-05-27",
"activity": 8
},
{
"date": "2025-05-28",
"activity": 8
},
{
"date": "2025-05-29",
"activity": 8
},
{
"date": "2025-05-30",
"activity": 10
},
{
"date": "2025-05-31",
"activity": 13
},
{
"date": "2025-06-01",
"activity": 17
},
{
"date": "2025-06-02",
"activity": 21
},
{
"date": "2025-06-03",
"activity": 24
},
{
"date": "2025-06-04",
"activity": 27
},
{
"date": "2025-06-05",
"activity": 28
},
{
"date": "2025-06-06",
"activity": 27
},
{
"date": "2025-06-07",
"activity": 25
},
{
"date": "2025-06-08",
"activity": 23
},
{
"date": "2025-06-09",
"activity": 21
},
{
"date": "2025-06-10",
"activity": 19
},
{
"date": "2025-06-11",
"activity": 19
},
{
"date": "2025-06-12",
"activity": 19
},
{
"date": "2025-06-13",
"activity": 19
},
{
"date": "2025-06-14",
"activity": 19
},
{
"date": "2025-06-15",
"activity": 18
},
{
"date": "2025-06-16",
"activity": 16
},
{
"date": "2025-06-17",
"activity": 12
},
{
"date": "2025-06-18",
"activity": 9
},
{
"date": "2025-06-19",
"activity": 5
},
{
"date": "2025-06-20",
"activity": 2
},
{
"date": "2025-06-21",
"activity": 1
},
{
"date": "2025-06-22",
"activity": 2
},
{
"date": "2025-06-23",
"activity": 4
},
{
"date": "2025-06-24",
"activity": 7
},
{
"date": "2025-06-25",
"activity": 10
},
{
"date": "2025-06-26",
"activity": 12
},
{
"date": "2025-06-27",
"activity": 14
},
{
"date": "2025-06-28",
"activity": 14
},
{
"date": "2025-06-29",
"activity": 14
},
{
"date": "2025-06-30",
"activity": 14
},
{
"date": "2025-07-01",
"activity": 15
},
{
"date": "2025-07-02",
"activity": 16
},
{
"date": "2025-07-03",
"activity": 18
},
{
"date": "2025-07-04",
"activity": 22
},
{
"date": "2025-07-05",
"activity": 25
},
{
"date": "2025-07-06",
"activity": 28
},
{
"date": "2025-07-07",
"activity": 29
},
{
"date": "2025-07-08",
"activity": 29
},
{
"date": "2025-07-09",
"activity": 27
},
{
"date": "2025-07-10",
"activity": 23
},
{
"date": "2025-07-11",
"activity": 20
},
{
"date": "2025-07-12",
"activity": 16
},
{
"date": "2025-07-13",
"activity": 14
},
{
"date": "2025-07-14",
"activity": 13
},
{
"date": "2025-07-15",
"activity": 12
},
{
"date": "2025-07-16",
"activity": 13
},
{
"date": "2025-07-17",
"activity": 13
},
{
"date": "2025-07-18",
"activity": 12
},
{
"date": "2025-07-19",
"activity": 11
},
{
"date": "2025-07-20",
"activity": 8
},
{
"date": "2025-07-21",
"activity": 6
},
{
"date": "2025-07-22",
"activity": 3
},
{
"date": "2025-07-23",
"activity": 2
},
{
"date": "2025-07-24",
"activity": 2
},
{
"date": "2025-07-25",
"activity": 4
},
{
"date": "2025-07-26",
"activity": 7
},
{
"date": "2025-07-27",
"activity": 11
},
{
"date": "2025-07-28",
"activity": 15
},
{
"date": "2025-07-29",
"activity": 18
},
{
"date": "2025-07-30",
"activity": 20
},
{
"date": "2025-07-31",
"activity": 21
},
{
"date": "2025-08-01",
"activity": 21
},
{
"date": "2025-08-02",
"activity": 20
},
{
"date": "2025-08-03",
"activity": 20
},
{
"date": "2025-08-04",
"activity": 20
},
{
"date": "2025-08-05",
"activity": 22
},
{
"date": "2025-08-06",
"activity": 23
},
{
"date": "2025-08-07",
"activity": 25
},
{
"date": "2025-08-08",
"activity": 27
},
{
"date": "2025-08-09",
"activity": 27
},
{
"date": "2025-08-10",
"activity": 25
},
{
"date": "2025-08-11",
"activity": 22
},
{
"date": "2025-08-12",
"activity": 18
},
{
"date": "2025-08-13",
"activity": 14
},
{
"date": "2025-08-14",
"activity": 10
},
{
"date": "2025-08-15",
"activity": 8
},
{
"date": "2025-08-16",
"activity": 6
},
{
"date": "2025-08-17",
"activity": 7
},
{
"date": "2025-08-18",
"activity": 7
},
{
"date": "2025-08-19",
"activity": 8
},
{
"date": "2025-08-20",
"activity": 9
},
{
"date": "2025-08-21",
"activity": 9
},
{
"date": "2025-08-22",
"activity": 8
},
{
"date": "2025-08-23",
"activity": 7
},
{
"date": "2025-08-24",
"activity": 5
},
{
"date": "2025-08-25",
"activity": 5
},
{
"date": "2025-08-26",
"activity": 6
},
{
"date": "2025-08-27",
"activity": 9
},
{
"date": "2025-08-28",
"activity": 13
},
{
"date": "2025-08-29",
"activity": 17
},
{
"date": "2025-08-30",
"activity": 21
},
{
"date": "2025-08-31",
"activity": 24
},
{
"date": "2025-09-01",
"activity": 26
},
{
"date": "2025-09-02",
"activity": 26
},
{
"date": "2025-09-03",
"activity": 25
},
{
"date": "2025-09-04",
"activity": 23
},
{
"date": "2025-09-05",
"activity": 22
},
{
"date": "2025-09-06",
"activity": 21
},
{
"date": "2025-09-07",
"activity": 21
},
{
"date": "2025-09-08",
"activity": 21
},
{
"date": "2025-09-09",
"activity": 22
},
{
"date": "2025-09-10",
"activity": 22
},
{
"date": "2025-09-11",
"activity": 22
},
{
"date": "2025-09-12",
"activity": 20
},
{
"date": "2025-09-13",
"activity": 16
},
{
"date": "2025-09-14",
"activity": 12
},
{
"date": "2025-09-15",
"activity": 8
},
{
"date": "2025-09-16",
"activity": 5
},
{
"date": "2025-09-17",
"activity": 3
},
{
"date": "2025-09-18",
"activity": 2
},
{
"date": "2025-09-19",
"activity": 3
},
{
"date": "2025-09-20",
"activity": 5
},
{
"date": "2025-09-21",
"activity": 8
},
{
"date": "2025-09-22",
"activity": 10
},
{
"date": "2025-09-23",
"activity": 11
},
{
"date": "2025-09-24",
"activity": 11
},
{
"date": "2025-09-25",
"activity": 11
},
{
"date": "2025-09-26",
"activity": 11
},
{
"date": "2025-09-27",
"activity": 11
},
{
"date": "2025-09-28",
"activity": 13
},
{
"date": "2025-09-29",
"activity": 15
},
{
"date": "2025-09-30",
"activity": 19
},
{
"date": "2025-10-01",
"activity": 22
},
{
"date": "2025-10-02",
"activity": 26
},
{
"date": "2025-10-03",
"activity": 28
},
{
"date": "2025-10-04",
"activity": 29
},
{
"date": "2025-10-05",
"activity": 28
},
{
"date": "2025-10-06",
"activity": 25
},
{
"date": "2025-10-07",
"activity": 22
},
{
"date": "2025-10-08",
"activity": 20
},
{
"date": "2025-10-09",
"activity": 17
},
{
"date": "2025-10-10",
"activity": 16
},
{
"date": "2025-10-11",
"activity": 16
},
{
"date": "2025-10-12",
"activity": 16
},
{
"date": "2025-10-13",
"activity": 16
},
{
"date": "2025-10-14",
"activity": 15
},
{
"date": "2025-10-15",
"activity": 13
},
{
"date": "2025-10-16",
"activity": 11
},
{
"date": "2025-10-17",
"activity": 7
},
{
"date": "2025-10-18",
"activity": 4
},
{
"date": "2025-10-19",
"activity": 2
},
{
"date": "2025-10-20",
"activity": 1
},
{
"date": "2025-10-21",
"activity": 2
},
{
"date": "2025-10-22",
"activity": 4
},
{
"date": "2025-10-23",
"activity": 8
},
{
"date": "2025-10-24",
"activity": 11
},
{
"date": "2025-10-25",
"activity": 14
},
{
"date": "2025-10-26",
"activity": 16
},
{
"date": "2025-10-27",
"activity": 17
},
{
"date": "2025-10-28",
"activity": 18
},
{
"date": "2025-10-29",
"activity": 17
},
{
"date": "2025-10-30",
"activity": 17
},
{
"date": "2025-10-31",
"activity": 18
},
{
"date": "2025-11-01",
"activity": 20
},
{
"date": "2025-11-02",
"activity": 22
},
{
"date": "2025-11-03",
"activity": 25
},
{
"date": "2025-11-04",
"activity": 27
},
{
"date": "2025-11-05",
"activity": 28
},
{
"date": "2025-11-06",
"activity": 28
},
{
"date": "2025-11-07",
"activity": 26
},
{
"date": "2025-11-08",
"activity": 22
},
{
"date": "2025-11-09",
"activity": 18
},
{
"date": "2025-11-10",
"activity": 14
},
{
"date": "2025-11-11",
"activity": 11
},
{
"date": "2025-11-12",
"activity": 10
},
{
"date": "2025-11-13",
"activity": 9
},
{
"date": "2025-11-14",
"activity": 10
},
{
"date": "2025-11-15",
"activity": 10
},
{
"date": "2025-11-16",
"activity": 10
},
{
"date": "2025-11-17",
"activity": 10
},
{
"date": "2025-11-18",
"activity": 8
},
{
"date": "2025-11-19",
"activity": 6
},
{
"date": "2025-11-20",
"activity": 4
},
{
"date": "2025-11-21",
"activity": 3
},
{
"date": "2025-11-22",
"activity": 3
},
{
"date": "2025-11-23",
"activity": 5
},
{
"date": "2025-11-24",
"activity": 9
},
{
"date": "2025-11-25",
"activity": 13
},
{
"date": "2025-11-26",
"activity": 17
},
{
"date": "2025-11-27",
"activity": 21
},
{
"date": "2025-11-28",
"activity": 23
},
{
"date": "2025-11-29",
"activity": 24
},
{
"date": "2025-11-30",
"activity": 23
},
{
"date": "2025-12-01",
"activity": 22
},
{
"date": "2025-12-02",
"activity": 21
},
{
"date": "2025-12-03",
"activity": 21
},
{
"date": "2025-12-04",
"activity": 21
},
{
"date": "2025-12-05",
"activity": 22
},
{
"date": "2025-12-06",
"activity": 24
},
{
"date": "2025-12-07",
"activity": 25
},
{
"date": "2025-12-08",
"activity": 25
},
{
"date": "2025-12-09",
"activity": 23
},
{
"date": "2025-12-10",
"activity": 20
},
{
"date": "2025-12-11",
"activity": 16
},
{
"date": "2025-12-12",
"activity": 12
},
{
"date": "2025-12-13",
"activity": 8
},
{
"date": "2025-12-14",
"activity": 5
},
{
"date": "2025-12-15",
"activity": 4
},
{
"date": "2025-12-16",
"activity": 4
},
{
"date": "2025-12-17",
"activity": 6
},
{
"date": "2025-12-18",
"activity": 7
},
{
"date": "2025-12-19",
"activity": 9
},
{
"date": "2025-12-20",
"activity": 9
},
{
"date": "2025-12-21",
"activity": 9
},
{
"date": "2025-12-22",
"activity": 9
},
{
"date": "2025-12-23",
"activity": 8
},
{
"date": "2025-12-24",
"activity": 8
},
{
"date": "2025-12-25",
"activity": 9
},
{
"date": "2025-12-26",
"activity": 11
},
{
"date": "2025-12-27",
"activity": 15
},
{
"date": "2025-12-28",
"activity": 19
},
{
"date": "2025-12-29",
"activity": 23
},
{
"date": "2025-12-30",
"activity": 26
},
{
"date": "2025-12-31",
"activity": 28
}
],
"mapping": {
"category": {
"field": "date"
},
"series": [
{
"field": "activity",
"label": "Daily activity"
}
]
},
"presentation": {
"dataLabels": false
}
});
// When the host unmounts:
// chart.destroy();

Await updates before reading a snapshot or exporting. Call chart.destroy() when the host unmounts. See the live catalog to interact with this type.

Set these fields in chartOptions. The option schema validates supported keys, ranges and choices; updating chartOptions replaces that authored object.

OptionDefaultAccepted values
showGridLinestruetrue or false
markOpacity10.2 to 1; step 0.05

Titles, legends, theme and labels belong to presentation or the corresponding top-level setting. Axis, color, navigation and interaction support depends on the selected chart; see Data & Configuration.

  • Heatmap — Compare measures across categories through color intensity.

Charts overview · Installation · Data & Configuration

This layout uses the authored ISO civil date, including the date portion of an accepted timestamp with an offset. It does not move a cell to the timestamp’s UTC date. The renderer searches the category label, labels and path for an accepted date, orders cells by day, and places Sunday first. Invalid date categories and null values do not create cells; the bound value measure (or the first series when omitted) supplies cell values. Multiple observations on one date remain distinct canonical observations rather than an automatic daily sum.

The calendar layout is separate from ordinary heatmap row/column viewports and from named-timezone range presets. Those controls do not change calendar-cell identity. Aggregate daily data before mapping it when the product needs one total per date.