Calendar grid with extruded blocks arranged in week columns and day-of-week rows. Block height and color encode daily values using a configurable color scale. Supports date parsing from ISO strings and Date objects. Cell size and gap are adjustable.

Subtype

▾

Live Preview

value
7
9
2
9
7
8
8
5
1
7

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

Edit JSON above · auto-previews after 0.9 s

90 days of activity data in week-column, day-row layout.

Was this article helpful?