Dark calendar heatmap
Calendar heatmap styletype: "calendar"Generate dark-mode calendar-heatmap images — a bright contribution ramp on a dark card. Fresh day data per API call. Try Imejis free.
Edit it — this is the actual editor panel
Design JSON — “Dark” variant
{
"title": "Calendar sample",
"description": "A year-long activity contribution graph",
"dimensions": {
"width": 820,
"height": 260
},
"background": {
"color": "#0d1117"
},
"components": [
{
"id": "sample-calendar",
"key": "calendar",
"type": "calendar",
"position": {
"x": 30,
"y": 70
},
"rotation": 0,
"size": {
"width": 760,
"height": 170
},
"dynamic": true,
"properties": {
"data": [
{
"date": "2024-01-01",
"value": 2
},
{
"date": "2024-01-02",
"value": 15
},
{
"date": "2024-01-03",
"value": 5
},
{
"date": "2024-01-04",
"value": 13
},
{
"date": "2024-01-06",
"value": 1
},
{
"date": "2024-01-08",
"value": 1
},
{
"date": "2024-01-09",
"value": 1
},
{
"date": "2024-01-11",
"value": 13
},
{
"date": "2024-01-12",
"value": 9
},
{
"date": "2024-01-14",
"value": 5
},
{
"date": "2024-01-16",
"value": 1
},
{
"date": "2024-01-17",
"value": 1
},
{
"date": "2024-01-19",
"value": 9
},
{
"date": "2024-01-20",
"value": 11
},
{
"date": "2024-01-21",
"value": 9
},
{
"date": "2024-01-25",
"value": 3
},
{
"date": "2024-01-27",
"value": 2
},
{
"date": "2024-01-28",
"value": 6
},
{
"date": "2024-01-30",
"value": 6
},
{
"date": "2024-01-31",
"value": 2
},
{
"date": "2024-02-01",
"value": 6
},
{
"date": "2024-02-02",
"value": 9
},
{
"date": "2024-02-03",
"value": 3
},
{
"date": "2024-02-04",
"value": 1
},
{
"date": "2024-02-06",
"value": 5
},
{
"date": "2024-02-07",
"value": 2
},
{
"date": "2024-02-08",
"value": 1
},
{
"date": "2024-02-09",
"value": 1
},
{
"date": "2024-02-11",
"value": 6
},
{
"date": "2024-02-12",
"value": 13
},
{
"date": "2024-02-14",
"value": 3
},
{
"date": "2024-02-15",
"value": 8
},
{
"date": "2024-02-18",
"value": 1
},
{
"date": "2024-02-20",
"value": 10
},
{
"date": "2024-02-21",
"value": 3
},
{
"date": "2024-02-22",
"value": 1
},
{
"date": "2024-02-24",
"value": 2
},
{
"date": "2024-02-25",
"value": 1
},
{
"date": "2024-02-26",
"value": 8
},
{
"date": "2024-02-27",
"value": 1
},
{
"date": "2024-02-28",
"value": 2
},
{
"date": "2024-03-01",
"value": 10
},
{
"date": "2024-03-02",
"value": 1
},
{
"date": "2024-03-03",
"value": 1
},
{
"date": "2024-03-04",
"value": 2
},
{
"date": "2024-03-05",
"value": 6
},
{
"date": "2024-03-06",
"value": 9
},
{
"date": "2024-03-07",
"value": 1
},
{
"date": "2024-03-09",
"value": 3
},
{
"date": "2024-03-10",
"value": 5
},
{
"date": "2024-03-11",
"value": 10
},
{
"date": "2024-03-12",
"value": 13
},
{
"date": "2024-03-13",
"value": 6
},
{
"date": "2024-03-14",
"value": 4
},
{
"date": "2024-03-16",
"value": 13
},
{
"date": "2024-03-17",
"value": 1
},
{
"date": "2024-03-19",
"value": 1
},
{
"date": "2024-03-21",
"value": 11
},
{
"date": "2024-03-23",
"value": 2
},
{
"date": "2024-03-25",
"value": 7
},
{
"date": "2024-03-26",
"value": 13
},
{
"date": "2024-03-28",
"value": 1
},
{
"date": "2024-03-29",
"value": 2
},
{
"date": "2024-03-31",
"value": 1
},
{
"date": "2024-04-01",
"value": 3
},
{
"date": "2024-04-03",
"value": 4
},
{
"date": "2024-04-04",
"value": 13
},
{
"date": "2024-04-05",
"value": 15
},
{
"date": "2024-04-07",
"value": 7
},
{
"date": "2024-04-09",
"value": 10
},
{
"date": "2024-04-10",
"value": 1
},
{
"date": "2024-04-11",
"value": 4
},
{
"date": "2024-04-12",
"value": 11
},
{
"date": "2024-04-13",
"value": 1
},
{
"date": "2024-04-14",
"value": 2
},
{
"date": "2024-04-18",
"value": 10
},
{
"date": "2024-04-19",
"value": 1
},
{
"date": "2024-04-20",
"value": 11
},
{
"date": "2024-04-21",
"value": 1
},
{
"date": "2024-04-24",
"value": 6
},
{
"date": "2024-04-26",
"value": 1
},
{
"date": "2024-04-27",
"value": 1
},
{
"date": "2024-04-28",
"value": 1
},
{
"date": "2024-05-01",
"value": 4
},
{
"date": "2024-05-02",
"value": 1
},
{
"date": "2024-05-06",
"value": 1
},
{
"date": "2024-05-07",
"value": 2
},
{
"date": "2024-05-11",
"value": 5
},
{
"date": "2024-05-12",
"value": 8
},
{
"date": "2024-05-13",
"value": 1
},
{
"date": "2024-05-15",
"value": 9
},
{
"date": "2024-05-16",
"value": 1
},
{
"date": "2024-05-17",
"value": 9
},
{
"date": "2024-05-23",
"value": 6
},
{
"date": "2024-05-24",
"value": 5
},
{
"date": "2024-05-25",
"value": 5
},
{
"date": "2024-05-27",
"value": 5
},
{
"date": "2024-05-28",
"value": 10
},
{
"date": "2024-05-29",
"value": 7
},
{
"date": "2024-05-30",
"value": 12
},
{
"date": "2024-06-01",
"value": 5
},
{
"date": "2024-06-02",
"value": 14
},
{
"date": "2024-06-03",
"value": 12
},
{
"date": "2024-06-04",
"value": 1
},
{
"date": "2024-06-05",
"value": 1
},
{
"date": "2024-06-06",
"value": 1
},
{
"date": "2024-06-07",
"value": 1
},
{
"date": "2024-06-08",
"value": 11
},
{
"date": "2024-06-10",
"value": 1
},
{
"date": "2024-06-11",
"value": 1
},
{
"date": "2024-06-12",
"value": 1
},
{
"date": "2024-06-13",
"value": 10
},
{
"date": "2024-06-14",
"value": 13
},
{
"date": "2024-06-15",
"value": 11
},
{
"date": "2024-06-16",
"value": 5
},
{
"date": "2024-06-18",
"value": 5
},
{
"date": "2024-06-25",
"value": 15
},
{
"date": "2024-06-26",
"value": 6
},
{
"date": "2024-06-27",
"value": 13
},
{
"date": "2024-06-28",
"value": 6
},
{
"date": "2024-06-29",
"value": 1
},
{
"date": "2024-07-01",
"value": 13
},
{
"date": "2024-07-02",
"value": 1
},
{
"date": "2024-07-04",
"value": 10
},
{
"date": "2024-07-05",
"value": 10
},
{
"date": "2024-07-06",
"value": 1
},
{
"date": "2024-07-08",
"value": 8
},
{
"date": "2024-07-09",
"value": 7
},
{
"date": "2024-07-13",
"value": 13
},
{
"date": "2024-07-15",
"value": 2
},
{
"date": "2024-07-16",
"value": 12
},
{
"date": "2024-07-20",
"value": 2
},
{
"date": "2024-07-21",
"value": 15
},
{
"date": "2024-07-23",
"value": 15
},
{
"date": "2024-07-24",
"value": 7
},
{
"date": "2024-07-25",
"value": 6
},
{
"date": "2024-07-26",
"value": 7
},
{
"date": "2024-07-27",
"value": 10
},
{
"date": "2024-07-28",
"value": 1
},
{
"date": "2024-07-30",
"value": 12
},
{
"date": "2024-07-31",
"value": 7
},
{
"date": "2024-08-02",
"value": 2
},
{
"date": "2024-08-03",
"value": 7
},
{
"date": "2024-08-05",
"value": 5
},
{
"date": "2024-08-07",
"value": 1
},
{
"date": "2024-08-09",
"value": 8
},
{
"date": "2024-08-10",
"value": 1
},
{
"date": "2024-08-11",
"value": 6
},
{
"date": "2024-08-12",
"value": 1
},
{
"date": "2024-08-13",
"value": 3
},
{
"date": "2024-08-15",
"value": 2
},
{
"date": "2024-08-18",
"value": 5
},
{
"date": "2024-08-19",
"value": 12
},
{
"date": "2024-08-20",
"value": 1
},
{
"date": "2024-08-21",
"value": 1
},
{
"date": "2024-08-22",
"value": 2
},
{
"date": "2024-08-23",
"value": 1
},
{
"date": "2024-08-25",
"value": 1
},
{
"date": "2024-08-26",
"value": 7
},
{
"date": "2024-08-27",
"value": 1
},
{
"date": "2024-08-28",
"value": 4
},
{
"date": "2024-08-31",
"value": 1
},
{
"date": "2024-09-01",
"value": 12
},
{
"date": "2024-09-02",
"value": 6
},
{
"date": "2024-09-09",
"value": 1
},
{
"date": "2024-09-10",
"value": 1
},
{
"date": "2024-09-11",
"value": 1
},
{
"date": "2024-09-14",
"value": 9
},
{
"date": "2024-09-16",
"value": 11
},
{
"date": "2024-09-19",
"value": 14
},
{
"date": "2024-09-20",
"value": 9
},
{
"date": "2024-09-21",
"value": 11
},
{
"date": "2024-09-22",
"value": 8
},
{
"date": "2024-09-23",
"value": 10
},
{
"date": "2024-09-25",
"value": 15
},
{
"date": "2024-09-26",
"value": 2
},
{
"date": "2024-09-29",
"value": 8
},
{
"date": "2024-09-30",
"value": 8
},
{
"date": "2024-10-01",
"value": 6
},
{
"date": "2024-10-02",
"value": 8
},
{
"date": "2024-10-03",
"value": 1
},
{
"date": "2024-10-04",
"value": 3
},
{
"date": "2024-10-08",
"value": 13
},
{
"date": "2024-10-09",
"value": 7
},
{
"date": "2024-10-10",
"value": 2
},
{
"date": "2024-10-11",
"value": 5
},
{
"date": "2024-10-12",
"value": 1
},
{
"date": "2024-10-14",
"value": 3
},
{
"date": "2024-10-15",
"value": 14
},
{
"date": "2024-10-18",
"value": 1
},
{
"date": "2024-10-22",
"value": 1
},
{
"date": "2024-10-24",
"value": 1
},
{
"date": "2024-10-25",
"value": 15
},
{
"date": "2024-10-26",
"value": 9
},
{
"date": "2024-10-27",
"value": 7
},
{
"date": "2024-10-28",
"value": 7
},
{
"date": "2024-10-29",
"value": 9
},
{
"date": "2024-11-02",
"value": 2
},
{
"date": "2024-11-03",
"value": 2
},
{
"date": "2024-11-04",
"value": 12
},
{
"date": "2024-11-05",
"value": 7
},
{
"date": "2024-11-08",
"value": 9
},
{
"date": "2024-11-09",
"value": 7
},
{
"date": "2024-11-10",
"value": 3
},
{
"date": "2024-11-12",
"value": 15
},
{
"date": "2024-11-14",
"value": 10
},
{
"date": "2024-11-16",
"value": 9
},
{
"date": "2024-11-17",
"value": 3
},
{
"date": "2024-11-19",
"value": 4
},
{
"date": "2024-11-21",
"value": 1
},
{
"date": "2024-11-23",
"value": 13
},
{
"date": "2024-11-28",
"value": 6
},
{
"date": "2024-11-29",
"value": 2
},
{
"date": "2024-11-30",
"value": 1
},
{
"date": "2024-12-01",
"value": 6
},
{
"date": "2024-12-02",
"value": 1
},
{
"date": "2024-12-03",
"value": 3
},
{
"date": "2024-12-05",
"value": 5
},
{
"date": "2024-12-09",
"value": 9
},
{
"date": "2024-12-10",
"value": 8
},
{
"date": "2024-12-11",
"value": 2
},
{
"date": "2024-12-12",
"value": 1
},
{
"date": "2024-12-14",
"value": 5
},
{
"date": "2024-12-15",
"value": 1
},
{
"date": "2024-12-17",
"value": 2
},
{
"date": "2024-12-18",
"value": 7
},
{
"date": "2024-12-19",
"value": 1
},
{
"date": "2024-12-20",
"value": 2
},
{
"date": "2024-12-21",
"value": 10
},
{
"date": "2024-12-22",
"value": 13
},
{
"date": "2024-12-23",
"value": 7
},
{
"date": "2024-12-24",
"value": 1
},
{
"date": "2024-12-27",
"value": 9
},
{
"date": "2024-12-28",
"value": 2
},
{
"date": "2024-12-29",
"value": 10
},
{
"date": "2024-12-30",
"value": 1
},
{
"date": "2024-12-31",
"value": 6
}
],
"startDate": "2024-01-01",
"endDate": "2024-12-31",
"colorMode": "ramp",
"showMonthLabels": true,
"showWeekdayLabels": true,
"opacity": 1,
"emptyColor": "#1e293b",
"labelColor": "#94a3b8",
"colors": [
"#0e4429",
"#006d32",
"#26a641",
"#39d353"
]
}
}
]
}Calendar heatmap examples
Real renders of the dark calendar heatmap — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Dark contribution graph
A year of commits in the GitHub dark ramp on a near-black card.
API overrides for this example
{
"calendar.emptyColor": "#1e293b",
"calendar.labelColor": "#94a3b8",
"calendar.colors": [
"#0e4429",
"#006d32",
"#26a641",
"#39d353"
],
"calendar.data": [
{
"date": "2024-01-01",
"value": 5
},
{
"date": "2024-01-02",
"value": 8
},
{
"date": "2024-01-04",
"value": 11
},
{
"date": "2024-01-05",
"value": 1
},
{
"date": "2024-01-06",
"value": 4
},
{
"date": "2024-01-07",
"value": 14
},
{
"date": "2024-01-09",
"value": 1
},
{
"date": "2024-01-10",
"value": 7
},
{
"date": "2024-01-11",
"value": 3
},
{
"date": "2024-01-15",
"value": 5
},
{
"date": "2024-01-18",
"value": 3
},
{
"date": "2024-01-19",
"value": 4
},
{
"date": "2024-01-21",
"value": 13
},
{
"date": "2024-01-31",
"value": 2
},
{
"date": "2024-02-01",
"value": 2
},
{
"date": "2024-02-02",
"value": 1
},
{
"date": "2024-02-04",
"value": 6
},
{
"date": "2024-02-05",
"value": 15
},
{
"date": "2024-02-06",
"value": 4
},
{
"date": "2024-02-07",
"value": 4
},
{
"date": "2024-02-08",
"value": 14
},
{
"date": "2024-02-11",
"value": 9
},
{
"date": "2024-02-12",
"value": 10
},
{
"date": "2024-02-13",
"value": 11
},
{
"date": "2024-02-14",
"value": 1
},
{
"date": "2024-02-15",
"value": 9
},
{
"date": "2024-02-21",
"value": 9
},
{
"date": "2024-02-23",
"value": 3
},
{
"date": "2024-02-24",
"value": 3
},
{
"date": "2024-02-25",
"value": 1
},
{
"date": "2024-02-27",
"value": 6
},
{
"date": "2024-02-28",
"value": 11
},
{
"date": "2024-02-29",
"value": 1
},
{
"date": "2024-03-01",
"value": 4
},
{
"date": "2024-03-02",
"value": 13
},
{
"date": "2024-03-03",
"value": 11
},
{
"date": "2024-03-05",
"value": 1
},
{
"date": "2024-03-06",
"value": 5
},
{
"date": "2024-03-07",
"value": 1
},
{
"date": "2024-03-13",
"value": 8
},
{
"date": "2024-03-19",
"value": 13
},
{
"date": "2024-03-20",
"value": 3
},
{
"date": "2024-03-22",
"value": 13
},
{
"date": "2024-03-23",
"value": 4
},
{
"date": "2024-03-24",
"value": 6
},
{
"date": "2024-03-25",
"value": 9
},
{
"date": "2024-03-26",
"value": 9
},
{
"date": "2024-03-27",
"value": 3
},
{
"date": "2024-03-28",
"value": 4
},
{
"date": "2024-03-30",
"value": 1
},
{
"date": "2024-03-31",
"value": 2
},
{
"date": "2024-04-01",
"value": 13
},
{
"date": "2024-04-02",
"value": 1
},
{
"date": "2024-04-04",
"value": 13
},
{
"date": "2024-04-06",
"value": 2
},
{
"date": "2024-04-08",
"value": 1
},
{
"date": "2024-04-09",
"value": 1
},
{
"date": "2024-04-14",
"value": 3
},
{
"date": "2024-04-15",
"value": 3
},
{
"date": "2024-04-18",
"value": 1
},
{
"date": "2024-04-19",
"value": 4
},
{
"date": "2024-04-20",
"value": 3
},
{
"date": "2024-04-22",
"value": 12
},
{
"date": "2024-04-24",
"value": 12
},
{
"date": "2024-04-25",
"value": 1
},
{
"date": "2024-04-26",
"value": 14
},
{
"date": "2024-04-30",
"value": 2
},
{
"date": "2024-05-01",
"value": 12
},
{
"date": "2024-05-04",
"value": 6
},
{
"date": "2024-05-05",
"value": 8
},
{
"date": "2024-05-06",
"value": 10
},
{
"date": "2024-05-07",
"value": 9
},
{
"date": "2024-05-08",
"value": 1
},
{
"date": "2024-05-09",
"value": 1
},
{
"date": "2024-05-11",
"value": 10
},
{
"date": "2024-05-12",
"value": 4
},
{
"date": "2024-05-15",
"value": 13
},
{
"date": "2024-05-16",
"value": 6
},
{
"date": "2024-05-17",
"value": 15
},
{
"date": "2024-05-19",
"value": 1
},
{
"date": "2024-05-20",
"value": 1
},
{
"date": "2024-05-23",
"value": 3
},
{
"date": "2024-05-24",
"value": 1
},
{
"date": "2024-05-26",
"value": 1
},
{
"date": "2024-05-29",
"value": 1
},
{
"date": "2024-05-30",
"value": 7
},
{
"date": "2024-05-31",
"value": 1
},
{
"date": "2024-06-01",
"value": 11
},
{
"date": "2024-06-03",
"value": 2
},
{
"date": "2024-06-05",
"value": 5
},
{
"date": "2024-06-06",
"value": 1
},
{
"date": "2024-06-07",
"value": 5
},
{
"date": "2024-06-12",
"value": 1
},
{
"date": "2024-06-17",
"value": 4
},
{
"date": "2024-06-18",
"value": 3
},
{
"date": "2024-06-19",
"value": 2
},
{
"date": "2024-06-20",
"value": 3
},
{
"date": "2024-06-22",
"value": 1
},
{
"date": "2024-06-23",
"value": 2
},
{
"date": "2024-06-24",
"value": 8
},
{
"date": "2024-06-27",
"value": 13
},
{
"date": "2024-07-01",
"value": 6
},
{
"date": "2024-07-02",
"value": 2
},
{
"date": "2024-07-04",
"value": 5
},
{
"date": "2024-07-05",
"value": 2
},
{
"date": "2024-07-08",
"value": 2
},
{
"date": "2024-07-10",
"value": 14
},
{
"date": "2024-07-11",
"value": 2
},
{
"date": "2024-07-12",
"value": 4
},
{
"date": "2024-07-13",
"value": 1
},
{
"date": "2024-07-14",
"value": 2
},
{
"date": "2024-07-15",
"value": 1
},
{
"date": "2024-07-16",
"value": 1
},
{
"date": "2024-07-17",
"value": 13
},
{
"date": "2024-07-19",
"value": 12
},
{
"date": "2024-07-20",
"value": 1
},
{
"date": "2024-07-23",
"value": 12
},
{
"date": "2024-07-24",
"value": 6
},
{
"date": "2024-07-25",
"value": 13
},
{
"date": "2024-07-26",
"value": 1
},
{
"date": "2024-07-27",
"value": 7
},
{
"date": "2024-07-30",
"value": 1
},
{
"date": "2024-07-31",
"value": 1
},
{
"date": "2024-08-02",
"value": 7
},
{
"date": "2024-08-05",
"value": 5
},
{
"date": "2024-08-06",
"value": 4
},
{
"date": "2024-08-07",
"value": 1
},
{
"date": "2024-08-08",
"value": 8
},
{
"date": "2024-08-10",
"value": 8
},
{
"date": "2024-08-11",
"value": 1
},
{
"date": "2024-08-13",
"value": 4
},
{
"date": "2024-08-14",
"value": 4
},
{
"date": "2024-08-16",
"value": 2
},
{
"date": "2024-08-18",
"value": 10
},
{
"date": "2024-08-19",
"value": 3
},
{
"date": "2024-08-20",
"value": 3
},
{
"date": "2024-08-23",
"value": 12
},
{
"date": "2024-08-25",
"value": 12
},
{
"date": "2024-08-28",
"value": 1
},
{
"date": "2024-08-29",
"value": 14
},
{
"date": "2024-09-03",
"value": 1
},
{
"date": "2024-09-04",
"value": 1
},
{
"date": "2024-09-05",
"value": 3
},
{
"date": "2024-09-07",
"value": 1
},
{
"date": "2024-09-08",
"value": 10
},
{
"date": "2024-09-09",
"value": 15
},
{
"date": "2024-09-11",
"value": 13
},
{
"date": "2024-09-12",
"value": 1
},
{
"date": "2024-09-13",
"value": 7
},
{
"date": "2024-09-14",
"value": 8
},
{
"date": "2024-09-15",
"value": 4
},
{
"date": "2024-09-20",
"value": 5
},
{
"date": "2024-09-21",
"value": 1
},
{
"date": "2024-09-22",
"value": 13
},
{
"date": "2024-09-23",
"value": 1
},
{
"date": "2024-09-24",
"value": 13
},
{
"date": "2024-09-26",
"value": 2
},
{
"date": "2024-09-27",
"value": 5
},
{
"date": "2024-09-28",
"value": 1
},
{
"date": "2024-09-29",
"value": 5
},
{
"date": "2024-09-30",
"value": 1
},
{
"date": "2024-10-01",
"value": 1
},
{
"date": "2024-10-02",
"value": 2
},
{
"date": "2024-10-03",
"value": 4
},
{
"date": "2024-10-06",
"value": 2
},
{
"date": "2024-10-11",
"value": 4
},
{
"date": "2024-10-12",
"value": 7
},
{
"date": "2024-10-13",
"value": 13
},
{
"date": "2024-10-14",
"value": 1
},
{
"date": "2024-10-16",
"value": 2
},
{
"date": "2024-10-18",
"value": 4
},
{
"date": "2024-10-19",
"value": 15
},
{
"date": "2024-10-20",
"value": 7
},
{
"date": "2024-10-21",
"value": 1
},
{
"date": "2024-10-22",
"value": 5
},
{
"date": "2024-10-23",
"value": 2
},
{
"date": "2024-10-24",
"value": 11
},
{
"date": "2024-10-25",
"value": 1
},
{
"date": "2024-10-26",
"value": 1
},
{
"date": "2024-10-27",
"value": 2
},
{
"date": "2024-10-28",
"value": 2
},
{
"date": "2024-10-29",
"value": 1
},
{
"date": "2024-10-30",
"value": 1
},
{
"date": "2024-10-31",
"value": 1
},
{
"date": "2024-11-01",
"value": 2
},
{
"date": "2024-11-04",
"value": 13
},
{
"date": "2024-11-08",
"value": 12
},
{
"date": "2024-11-09",
"value": 5
},
{
"date": "2024-11-10",
"value": 1
},
{
"date": "2024-11-11",
"value": 10
},
{
"date": "2024-11-13",
"value": 6
},
{
"date": "2024-11-17",
"value": 11
},
{
"date": "2024-11-18",
"value": 1
},
{
"date": "2024-11-19",
"value": 6
},
{
"date": "2024-11-20",
"value": 13
},
{
"date": "2024-11-22",
"value": 13
},
{
"date": "2024-11-23",
"value": 9
},
{
"date": "2024-11-26",
"value": 7
},
{
"date": "2024-11-27",
"value": 7
},
{
"date": "2024-11-29",
"value": 5
},
{
"date": "2024-12-02",
"value": 7
},
{
"date": "2024-12-03",
"value": 1
},
{
"date": "2024-12-05",
"value": 12
},
{
"date": "2024-12-08",
"value": 9
},
{
"date": "2024-12-09",
"value": 9
},
{
"date": "2024-12-11",
"value": 2
},
{
"date": "2024-12-12",
"value": 2
},
{
"date": "2024-12-13",
"value": 11
},
{
"date": "2024-12-14",
"value": 5
},
{
"date": "2024-12-16",
"value": 1
},
{
"date": "2024-12-17",
"value": 4
},
{
"date": "2024-12-18",
"value": 1
},
{
"date": "2024-12-19",
"value": 1
},
{
"date": "2024-12-20",
"value": 4
},
{
"date": "2024-12-22",
"value": 5
},
{
"date": "2024-12-23",
"value": 1
},
{
"date": "2024-12-24",
"value": 1
},
{
"date": "2024-12-25",
"value": 4
},
{
"date": "2024-12-27",
"value": 2
},
{
"date": "2024-12-30",
"value": 15
}
],
"calendar.startDate": "2024-01-01",
"calendar.endDate": "2024-12-31"
}Dark daily active users
Half a year of DAU in a cyan ramp on a dark card.
API overrides for this example
{
"calendar.emptyColor": "#1e293b",
"calendar.labelColor": "#94a3b8",
"calendar.colors": [
"#164e63",
"#0891b2",
"#22d3ee",
"#67e8f9"
],
"calendar.data": [
{
"date": "2024-01-01",
"value": 2
},
{
"date": "2024-01-02",
"value": 53
},
{
"date": "2024-01-04",
"value": 32
},
{
"date": "2024-01-05",
"value": 9
},
{
"date": "2024-01-06",
"value": 1
},
{
"date": "2024-01-07",
"value": 60
},
{
"date": "2024-01-09",
"value": 58
},
{
"date": "2024-01-10",
"value": 36
},
{
"date": "2024-01-11",
"value": 2
},
{
"date": "2024-01-12",
"value": 30
},
{
"date": "2024-01-13",
"value": 2
},
{
"date": "2024-01-14",
"value": 1
},
{
"date": "2024-01-15",
"value": 1
},
{
"date": "2024-01-16",
"value": 30
},
{
"date": "2024-01-17",
"value": 5
},
{
"date": "2024-01-18",
"value": 54
},
{
"date": "2024-01-21",
"value": 1
},
{
"date": "2024-01-22",
"value": 39
},
{
"date": "2024-01-23",
"value": 43
},
{
"date": "2024-01-24",
"value": 27
},
{
"date": "2024-01-26",
"value": 1
},
{
"date": "2024-01-27",
"value": 4
},
{
"date": "2024-01-29",
"value": 1
},
{
"date": "2024-01-30",
"value": 6
},
{
"date": "2024-01-31",
"value": 52
},
{
"date": "2024-02-01",
"value": 60
},
{
"date": "2024-02-02",
"value": 9
},
{
"date": "2024-02-04",
"value": 7
},
{
"date": "2024-02-05",
"value": 7
},
{
"date": "2024-02-06",
"value": 9
},
{
"date": "2024-02-09",
"value": 11
},
{
"date": "2024-02-10",
"value": 35
},
{
"date": "2024-02-11",
"value": 2
},
{
"date": "2024-02-12",
"value": 56
},
{
"date": "2024-02-13",
"value": 55
},
{
"date": "2024-02-14",
"value": 1
},
{
"date": "2024-02-16",
"value": 21
},
{
"date": "2024-02-17",
"value": 11
},
{
"date": "2024-02-18",
"value": 5
},
{
"date": "2024-02-20",
"value": 6
},
{
"date": "2024-02-21",
"value": 2
},
{
"date": "2024-02-23",
"value": 1
},
{
"date": "2024-02-24",
"value": 20
},
{
"date": "2024-02-25",
"value": 53
},
{
"date": "2024-02-26",
"value": 19
},
{
"date": "2024-02-27",
"value": 55
},
{
"date": "2024-02-28",
"value": 37
},
{
"date": "2024-02-29",
"value": 41
},
{
"date": "2024-03-01",
"value": 31
},
{
"date": "2024-03-02",
"value": 20
},
{
"date": "2024-03-03",
"value": 23
},
{
"date": "2024-03-04",
"value": 8
},
{
"date": "2024-03-05",
"value": 3
},
{
"date": "2024-03-06",
"value": 49
},
{
"date": "2024-03-07",
"value": 58
},
{
"date": "2024-03-09",
"value": 50
},
{
"date": "2024-03-10",
"value": 34
},
{
"date": "2024-03-11",
"value": 1
},
{
"date": "2024-03-12",
"value": 1
},
{
"date": "2024-03-13",
"value": 2
},
{
"date": "2024-03-14",
"value": 1
},
{
"date": "2024-03-17",
"value": 1
},
{
"date": "2024-03-18",
"value": 27
},
{
"date": "2024-03-20",
"value": 1
},
{
"date": "2024-03-23",
"value": 1
},
{
"date": "2024-03-25",
"value": 7
},
{
"date": "2024-03-27",
"value": 53
},
{
"date": "2024-03-28",
"value": 5
},
{
"date": "2024-03-30",
"value": 7
},
{
"date": "2024-03-31",
"value": 19
},
{
"date": "2024-04-01",
"value": 21
},
{
"date": "2024-04-04",
"value": 44
},
{
"date": "2024-04-05",
"value": 7
},
{
"date": "2024-04-06",
"value": 7
},
{
"date": "2024-04-07",
"value": 49
},
{
"date": "2024-04-08",
"value": 1
},
{
"date": "2024-04-10",
"value": 37
},
{
"date": "2024-04-11",
"value": 42
},
{
"date": "2024-04-13",
"value": 1
},
{
"date": "2024-04-14",
"value": 4
},
{
"date": "2024-04-15",
"value": 15
},
{
"date": "2024-04-16",
"value": 53
},
{
"date": "2024-04-18",
"value": 28
},
{
"date": "2024-04-19",
"value": 42
},
{
"date": "2024-04-20",
"value": 16
},
{
"date": "2024-04-22",
"value": 3
},
{
"date": "2024-04-26",
"value": 30
},
{
"date": "2024-04-27",
"value": 57
},
{
"date": "2024-04-28",
"value": 36
},
{
"date": "2024-04-30",
"value": 43
},
{
"date": "2024-05-02",
"value": 4
},
{
"date": "2024-05-03",
"value": 1
},
{
"date": "2024-05-05",
"value": 50
},
{
"date": "2024-05-08",
"value": 6
},
{
"date": "2024-05-09",
"value": 46
},
{
"date": "2024-05-10",
"value": 40
},
{
"date": "2024-05-11",
"value": 54
},
{
"date": "2024-05-12",
"value": 23
},
{
"date": "2024-05-13",
"value": 46
},
{
"date": "2024-05-15",
"value": 39
},
{
"date": "2024-05-16",
"value": 1
},
{
"date": "2024-05-17",
"value": 4
},
{
"date": "2024-05-18",
"value": 55
},
{
"date": "2024-05-21",
"value": 16
},
{
"date": "2024-05-22",
"value": 13
},
{
"date": "2024-05-23",
"value": 6
},
{
"date": "2024-05-24",
"value": 34
},
{
"date": "2024-05-25",
"value": 42
},
{
"date": "2024-05-26",
"value": 2
},
{
"date": "2024-05-28",
"value": 1
},
{
"date": "2024-05-29",
"value": 1
},
{
"date": "2024-05-30",
"value": 22
},
{
"date": "2024-06-02",
"value": 20
},
{
"date": "2024-06-05",
"value": 46
},
{
"date": "2024-06-09",
"value": 28
},
{
"date": "2024-06-10",
"value": 1
},
{
"date": "2024-06-11",
"value": 50
},
{
"date": "2024-06-13",
"value": 27
},
{
"date": "2024-06-14",
"value": 8
},
{
"date": "2024-06-16",
"value": 21
},
{
"date": "2024-06-17",
"value": 7
},
{
"date": "2024-06-18",
"value": 33
},
{
"date": "2024-06-19",
"value": 30
},
{
"date": "2024-06-20",
"value": 2
},
{
"date": "2024-06-21",
"value": 9
},
{
"date": "2024-06-22",
"value": 58
},
{
"date": "2024-06-23",
"value": 26
},
{
"date": "2024-06-24",
"value": 48
},
{
"date": "2024-06-26",
"value": 37
},
{
"date": "2024-06-27",
"value": 3
},
{
"date": "2024-06-28",
"value": 33
},
{
"date": "2024-07-01",
"value": 14
},
{
"date": "2024-07-02",
"value": 1
},
{
"date": "2024-07-04",
"value": 56
},
{
"date": "2024-07-08",
"value": 3
},
{
"date": "2024-07-10",
"value": 8
},
{
"date": "2024-07-12",
"value": 16
},
{
"date": "2024-07-13",
"value": 10
},
{
"date": "2024-07-14",
"value": 6
},
{
"date": "2024-07-16",
"value": 7
},
{
"date": "2024-07-17",
"value": 35
},
{
"date": "2024-07-18",
"value": 10
}
],
"calendar.startDate": "2024-01-01",
"calendar.endDate": "2024-07-18"
}When to use the dark style
- Dark-theme profile / activity cards
- Year-in-review graphics on dark backgrounds
- Streak cards for social sharing
Use it dynamically via the API
Push fresh days per render with '<key>.data' (or just '<key>') as [{ date, value }]; the grid recolors to match.
Full API request with this variant's current values — the playground above sends only the properties you change
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
"calendar.data": [
{
"date": "2024-01-01",
"value": 2
},
{
"date": "2024-01-02",
"value": 15
},
{
"date": "2024-01-03",
"value": 5
},
{
"date": "2024-01-04",
"value": 13
},
{
"date": "2024-01-06",
"value": 1
},
{
"date": "2024-01-08",
"value": 1
},
{
"date": "2024-01-09",
"value": 1
},
{
"date": "2024-01-11",
"value": 13
},
{
"date": "2024-01-12",
"value": 9
},
{
"date": "2024-01-14",
"value": 5
},
{
"date": "2024-01-16",
"value": 1
},
{
"date": "2024-01-17",
"value": 1
},
{
"date": "2024-01-19",
"value": 9
},
{
"date": "2024-01-20",
"value": 11
},
{
"date": "2024-01-21",
"value": 9
},
{
"date": "2024-01-25",
"value": 3
},
{
"date": "2024-01-27",
"value": 2
},
{
"date": "2024-01-28",
"value": 6
},
{
"date": "2024-01-30",
"value": 6
},
{
"date": "2024-01-31",
"value": 2
},
{
"date": "2024-02-01",
"value": 6
},
{
"date": "2024-02-02",
"value": 9
},
{
"date": "2024-02-03",
"value": 3
},
{
"date": "2024-02-04",
"value": 1
},
{
"date": "2024-02-06",
"value": 5
},
{
"date": "2024-02-07",
"value": 2
},
{
"date": "2024-02-08",
"value": 1
},
{
"date": "2024-02-09",
"value": 1
},
{
"date": "2024-02-11",
"value": 6
},
{
"date": "2024-02-12",
"value": 13
},
{
"date": "2024-02-14",
"value": 3
},
{
"date": "2024-02-15",
"value": 8
},
{
"date": "2024-02-18",
"value": 1
},
{
"date": "2024-02-20",
"value": 10
},
{
"date": "2024-02-21",
"value": 3
},
{
"date": "2024-02-22",
"value": 1
},
{
"date": "2024-02-24",
"value": 2
},
{
"date": "2024-02-25",
"value": 1
},
{
"date": "2024-02-26",
"value": 8
},
{
"date": "2024-02-27",
"value": 1
},
{
"date": "2024-02-28",
"value": 2
},
{
"date": "2024-03-01",
"value": 10
},
{
"date": "2024-03-02",
"value": 1
},
{
"date": "2024-03-03",
"value": 1
},
{
"date": "2024-03-04",
"value": 2
},
{
"date": "2024-03-05",
"value": 6
},
{
"date": "2024-03-06",
"value": 9
},
{
"date": "2024-03-07",
"value": 1
},
{
"date": "2024-03-09",
"value": 3
},
{
"date": "2024-03-10",
"value": 5
},
{
"date": "2024-03-11",
"value": 10
},
{
"date": "2024-03-12",
"value": 13
},
{
"date": "2024-03-13",
"value": 6
},
{
"date": "2024-03-14",
"value": 4
},
{
"date": "2024-03-16",
"value": 13
},
{
"date": "2024-03-17",
"value": 1
},
{
"date": "2024-03-19",
"value": 1
},
{
"date": "2024-03-21",
"value": 11
},
{
"date": "2024-03-23",
"value": 2
},
{
"date": "2024-03-25",
"value": 7
},
{
"date": "2024-03-26",
"value": 13
},
{
"date": "2024-03-28",
"value": 1
},
{
"date": "2024-03-29",
"value": 2
},
{
"date": "2024-03-31",
"value": 1
},
{
"date": "2024-04-01",
"value": 3
},
{
"date": "2024-04-03",
"value": 4
},
{
"date": "2024-04-04",
"value": 13
},
{
"date": "2024-04-05",
"value": 15
},
{
"date": "2024-04-07",
"value": 7
},
{
"date": "2024-04-09",
"value": 10
},
{
"date": "2024-04-10",
"value": 1
},
{
"date": "2024-04-11",
"value": 4
},
{
"date": "2024-04-12",
"value": 11
},
{
"date": "2024-04-13",
"value": 1
},
{
"date": "2024-04-14",
"value": 2
},
{
"date": "2024-04-18",
"value": 10
},
{
"date": "2024-04-19",
"value": 1
},
{
"date": "2024-04-20",
"value": 11
},
{
"date": "2024-04-21",
"value": 1
},
{
"date": "2024-04-24",
"value": 6
},
{
"date": "2024-04-26",
"value": 1
},
{
"date": "2024-04-27",
"value": 1
},
{
"date": "2024-04-28",
"value": 1
},
{
"date": "2024-05-01",
"value": 4
},
{
"date": "2024-05-02",
"value": 1
},
{
"date": "2024-05-06",
"value": 1
},
{
"date": "2024-05-07",
"value": 2
},
{
"date": "2024-05-11",
"value": 5
},
{
"date": "2024-05-12",
"value": 8
},
{
"date": "2024-05-13",
"value": 1
},
{
"date": "2024-05-15",
"value": 9
},
{
"date": "2024-05-16",
"value": 1
},
{
"date": "2024-05-17",
"value": 9
},
{
"date": "2024-05-23",
"value": 6
},
{
"date": "2024-05-24",
"value": 5
},
{
"date": "2024-05-25",
"value": 5
},
{
"date": "2024-05-27",
"value": 5
},
{
"date": "2024-05-28",
"value": 10
},
{
"date": "2024-05-29",
"value": 7
},
{
"date": "2024-05-30",
"value": 12
},
{
"date": "2024-06-01",
"value": 5
},
{
"date": "2024-06-02",
"value": 14
},
{
"date": "2024-06-03",
"value": 12
},
{
"date": "2024-06-04",
"value": 1
},
{
"date": "2024-06-05",
"value": 1
},
{
"date": "2024-06-06",
"value": 1
},
{
"date": "2024-06-07",
"value": 1
},
{
"date": "2024-06-08",
"value": 11
},
{
"date": "2024-06-10",
"value": 1
},
{
"date": "2024-06-11",
"value": 1
},
{
"date": "2024-06-12",
"value": 1
},
{
"date": "2024-06-13",
"value": 10
},
{
"date": "2024-06-14",
"value": 13
},
{
"date": "2024-06-15",
"value": 11
},
{
"date": "2024-06-16",
"value": 5
},
{
"date": "2024-06-18",
"value": 5
},
{
"date": "2024-06-25",
"value": 15
},
{
"date": "2024-06-26",
"value": 6
},
{
"date": "2024-06-27",
"value": 13
},
{
"date": "2024-06-28",
"value": 6
},
{
"date": "2024-06-29",
"value": 1
},
{
"date": "2024-07-01",
"value": 13
},
{
"date": "2024-07-02",
"value": 1
},
{
"date": "2024-07-04",
"value": 10
},
{
"date": "2024-07-05",
"value": 10
},
{
"date": "2024-07-06",
"value": 1
},
{
"date": "2024-07-08",
"value": 8
},
{
"date": "2024-07-09",
"value": 7
},
{
"date": "2024-07-13",
"value": 13
},
{
"date": "2024-07-15",
"value": 2
},
{
"date": "2024-07-16",
"value": 12
},
{
"date": "2024-07-20",
"value": 2
},
{
"date": "2024-07-21",
"value": 15
},
{
"date": "2024-07-23",
"value": 15
},
{
"date": "2024-07-24",
"value": 7
},
{
"date": "2024-07-25",
"value": 6
},
{
"date": "2024-07-26",
"value": 7
},
{
"date": "2024-07-27",
"value": 10
},
{
"date": "2024-07-28",
"value": 1
},
{
"date": "2024-07-30",
"value": 12
},
{
"date": "2024-07-31",
"value": 7
},
{
"date": "2024-08-02",
"value": 2
},
{
"date": "2024-08-03",
"value": 7
},
{
"date": "2024-08-05",
"value": 5
},
{
"date": "2024-08-07",
"value": 1
},
{
"date": "2024-08-09",
"value": 8
},
{
"date": "2024-08-10",
"value": 1
},
{
"date": "2024-08-11",
"value": 6
},
{
"date": "2024-08-12",
"value": 1
},
{
"date": "2024-08-13",
"value": 3
},
{
"date": "2024-08-15",
"value": 2
},
{
"date": "2024-08-18",
"value": 5
},
{
"date": "2024-08-19",
"value": 12
},
{
"date": "2024-08-20",
"value": 1
},
{
"date": "2024-08-21",
"value": 1
},
{
"date": "2024-08-22",
"value": 2
},
{
"date": "2024-08-23",
"value": 1
},
{
"date": "2024-08-25",
"value": 1
},
{
"date": "2024-08-26",
"value": 7
},
{
"date": "2024-08-27",
"value": 1
},
{
"date": "2024-08-28",
"value": 4
},
{
"date": "2024-08-31",
"value": 1
},
{
"date": "2024-09-01",
"value": 12
},
{
"date": "2024-09-02",
"value": 6
},
{
"date": "2024-09-09",
"value": 1
},
{
"date": "2024-09-10",
"value": 1
},
{
"date": "2024-09-11",
"value": 1
},
{
"date": "2024-09-14",
"value": 9
},
{
"date": "2024-09-16",
"value": 11
},
{
"date": "2024-09-19",
"value": 14
},
{
"date": "2024-09-20",
"value": 9
},
{
"date": "2024-09-21",
"value": 11
},
{
"date": "2024-09-22",
"value": 8
},
{
"date": "2024-09-23",
"value": 10
},
{
"date": "2024-09-25",
"value": 15
},
{
"date": "2024-09-26",
"value": 2
},
{
"date": "2024-09-29",
"value": 8
},
{
"date": "2024-09-30",
"value": 8
},
{
"date": "2024-10-01",
"value": 6
},
{
"date": "2024-10-02",
"value": 8
},
{
"date": "2024-10-03",
"value": 1
},
{
"date": "2024-10-04",
"value": 3
},
{
"date": "2024-10-08",
"value": 13
},
{
"date": "2024-10-09",
"value": 7
},
{
"date": "2024-10-10",
"value": 2
},
{
"date": "2024-10-11",
"value": 5
},
{
"date": "2024-10-12",
"value": 1
},
{
"date": "2024-10-14",
"value": 3
},
{
"date": "2024-10-15",
"value": 14
},
{
"date": "2024-10-18",
"value": 1
},
{
"date": "2024-10-22",
"value": 1
},
{
"date": "2024-10-24",
"value": 1
},
{
"date": "2024-10-25",
"value": 15
},
{
"date": "2024-10-26",
"value": 9
},
{
"date": "2024-10-27",
"value": 7
},
{
"date": "2024-10-28",
"value": 7
},
{
"date": "2024-10-29",
"value": 9
},
{
"date": "2024-11-02",
"value": 2
},
{
"date": "2024-11-03",
"value": 2
},
{
"date": "2024-11-04",
"value": 12
},
{
"date": "2024-11-05",
"value": 7
},
{
"date": "2024-11-08",
"value": 9
},
{
"date": "2024-11-09",
"value": 7
},
{
"date": "2024-11-10",
"value": 3
},
{
"date": "2024-11-12",
"value": 15
},
{
"date": "2024-11-14",
"value": 10
},
{
"date": "2024-11-16",
"value": 9
},
{
"date": "2024-11-17",
"value": 3
},
{
"date": "2024-11-19",
"value": 4
},
{
"date": "2024-11-21",
"value": 1
},
{
"date": "2024-11-23",
"value": 13
},
{
"date": "2024-11-28",
"value": 6
},
{
"date": "2024-11-29",
"value": 2
},
{
"date": "2024-11-30",
"value": 1
},
{
"date": "2024-12-01",
"value": 6
},
{
"date": "2024-12-02",
"value": 1
},
{
"date": "2024-12-03",
"value": 3
},
{
"date": "2024-12-05",
"value": 5
},
{
"date": "2024-12-09",
"value": 9
},
{
"date": "2024-12-10",
"value": 8
},
{
"date": "2024-12-11",
"value": 2
},
{
"date": "2024-12-12",
"value": 1
},
{
"date": "2024-12-14",
"value": 5
},
{
"date": "2024-12-15",
"value": 1
},
{
"date": "2024-12-17",
"value": 2
},
{
"date": "2024-12-18",
"value": 7
},
{
"date": "2024-12-19",
"value": 1
},
{
"date": "2024-12-20",
"value": 2
},
{
"date": "2024-12-21",
"value": 10
},
{
"date": "2024-12-22",
"value": 13
},
{
"date": "2024-12-23",
"value": 7
},
{
"date": "2024-12-24",
"value": 1
},
{
"date": "2024-12-27",
"value": 9
},
{
"date": "2024-12-28",
"value": 2
},
{
"date": "2024-12-29",
"value": 10
},
{
"date": "2024-12-30",
"value": 1
},
{
"date": "2024-12-31",
"value": 6
}
],
"calendar.startDate": "2024-01-01",
"calendar.endDate": "2024-12-31",
"calendar.colorMode": "ramp",
"calendar.showMonthLabels": true,
"calendar.showWeekdayLabels": true,
"calendar.opacity": 1,
"calendar.emptyColor": "#1e293b",
"calendar.labelColor": "#94a3b8",
"calendar.colors": [
"#0e4429",
"#006d32",
"#26a641",
"#39d353"
]
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Other calendar heatmap styles
See the calendar heatmap component page for the full property reference and FAQs.