Calendar heatmaps arrange daily values in a calendar grid — weeks as columns, days of the week as rows — and encode value magnitude with color intensity. They excel at revealing day-of-week patterns, weekly seasonality, outlier days, and year-over-year comparisons at a glance. Popularized by GitHub's contribution graph, they are now a standard pattern in activity dashboards.

Subtype

▾

Live Preview

value
3
0
5
8
12
6
4
9
15
11

{
  "title": {
    "text": "Code Commit Activity — Q1 2025"
  },
  "data": [
    {
      "date": "2025-01-01",
      "value": 3
    },
    {
      "date": "2025-01-02",
      "value": 0
    },
    {
      "date": "2025-01-03",
      "value": 5
    },
    {
      "date": "2025-01-06",
      "value": 8
    },
    {
      "date": "2025-01-07",
      "value": 12
    },
    {
      "date": "2025-01-08",
      "value": 6
    },
    {
      "date": "2025-01-09",
      "value": 4
    },
    {
      "date": "2025-01-10",
      "value": 9
    },
    {
      "date": "2025-01-13",
      "value": 15
    },
    {
      "date": "2025-01-14",
      "value": 11
    },
    {
      "date": "2025-01-15",
      "value": 7
    },
    {
      "date": "2025-01-16",
      "value": 3
    },
    {
      "date": "2025-01-17",
      "value": 18
    },
    {
      "date": "2025-01-20",
      "value": 2
    },
    {
      "date": "2025-01-21",
      "value": 14
    },
    {
      "date": "2025-01-22",
      "value": 10
    },
    {
      "date": "2025-01-23",
      "value": 6
    },
    {
      "date": "2025-01-24",
      "value": 8
    },
    {
      "date": "2025-01-27",
      "value": 20
    },
    {
      "date": "2025-01-28",
      "value": 16
    },
    {
      "date": "2025-01-29",
      "value": 9
    },
    {
      "date": "2025-01-30",
      "value": 5
    },
    {
      "date": "2025-01-31",
      "value": 11
    },
    {
      "date": "2025-02-03",
      "value": 7
    },
    {
      "date": "2025-02-04",
      "value": 13
    },
    {
      "date": "2025-02-05",
      "value": 4
    },
    {
      "date": "2025-02-06",
      "value": 19
    },
    {
      "date": "2025-02-07",
      "value": 8
    },
    {
      "date": "2025-02-10",
      "value": 22
    },
    {
      "date": "2025-02-11",
      "value": 15
    },
    {
      "date": "2025-02-12",
      "value": 10
    },
    {
      "date": "2025-02-13",
      "value": 6
    },
    {
      "date": "2025-02-14",
      "value": 3
    },
    {
      "date": "2025-02-17",
      "value": 0
    },
    {
      "date": "2025-02-18",
      "value": 9
    },
    {
      "date": "2025-02-19",
      "value": 14
    },
    {
      "date": "2025-02-20",
      "value": 17
    },
    {
      "date": "2025-02-21",
      "value": 5
    },
    {
      "date": "2025-02-24",
      "value": 12
    },
    {
      "date": "2025-02-25",
      "value": 8
    },
    {
      "date": "2025-02-26",
      "value": 16
    },
    {
      "date": "2025-02-27",
      "value": 11
    },
    {
      "date": "2025-02-28",
      "value": 7
    },
    {
      "date": "2025-03-03",
      "value": 18
    },
    {
      "date": "2025-03-04",
      "value": 13
    },
    {
      "date": "2025-03-05",
      "value": 6
    },
    {
      "date": "2025-03-06",
      "value": 21
    },
    {
      "date": "2025-03-07",
      "value": 9
    },
    {
      "date": "2025-03-10",
      "value": 25
    },
    {
      "date": "2025-03-11",
      "value": 17
    },
    {
      "date": "2025-03-12",
      "value": 8
    },
    {
      "date": "2025-03-13",
      "value": 4
    },
    {
      "date": "2025-03-14",
      "value": 12
    },
    {
      "date": "2025-03-17",
      "value": 19
    },
    {
      "date": "2025-03-18",
      "value": 14
    },
    {
      "date": "2025-03-19",
      "value": 22
    },
    {
      "date": "2025-03-20",
      "value": 16
    },
    {
      "date": "2025-03-21",
      "value": 10
    },
    {
      "date": "2025-03-24",
      "value": 8
    },
    {
      "date": "2025-03-25",
      "value": 5
    },
    {
      "date": "2025-03-26",
      "value": 13
    },
    {
      "date": "2025-03-27",
      "value": 20
    },
    {
      "date": "2025-03-28",
      "value": 15
    }
  ],
  "series": [
    {
      "type": "calendarheatmap",
      "dateKey": "date",
      "valueKey": "value",
      "colorScheme": "green"
    }
  ]
}

Edit JSON above · auto-previews after 0.9 s

Commit activity over 3 months displayed in a calendar grid — darker cells indicate days with more commits.

PreviousLiquid Fill Charts Next OHLC Charts

Was this article helpful?