Calendar heatmap component
Datatype: "calendar"A calendar heatmap — a GitHub-style grid of days colored by a daily value, laid out in week columns. Built for activity streaks, contribution graphs and daily-metric summaries.
Edit it — this is the actual editor panel
Design JSON
{
"title": "Calendar sample",
"description": "A year-long activity contribution graph",
"dimensions": {
"width": 820,
"height": 260
},
"background": {
"color": "#ffffff"
},
"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
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorCalendar heatmap examples
Real renders of the calendar heatmap — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Contribution graph
A full year of activity in the classic green GitHub ramp.
API overrides for this example
{
"calendar.data": [
{
"date": "2024-01-01",
"value": 1
},
{
"date": "2024-01-02",
"value": 1
},
{
"date": "2024-01-03",
"value": 2
},
{
"date": "2024-01-04",
"value": 1
},
{
"date": "2024-01-05",
"value": 5
},
{
"date": "2024-01-06",
"value": 12
},
{
"date": "2024-01-07",
"value": 8
},
{
"date": "2024-01-10",
"value": 1
},
{
"date": "2024-01-11",
"value": 5
},
{
"date": "2024-01-12",
"value": 14
},
{
"date": "2024-01-13",
"value": 2
},
{
"date": "2024-01-14",
"value": 7
},
{
"date": "2024-01-17",
"value": 10
},
{
"date": "2024-01-18",
"value": 2
},
{
"date": "2024-01-19",
"value": 4
},
{
"date": "2024-01-20",
"value": 6
},
{
"date": "2024-01-21",
"value": 11
},
{
"date": "2024-01-22",
"value": 1
},
{
"date": "2024-01-24",
"value": 1
},
{
"date": "2024-01-27",
"value": 7
},
{
"date": "2024-01-28",
"value": 11
},
{
"date": "2024-01-29",
"value": 3
},
{
"date": "2024-01-30",
"value": 1
},
{
"date": "2024-01-31",
"value": 1
},
{
"date": "2024-02-03",
"value": 1
},
{
"date": "2024-02-07",
"value": 8
},
{
"date": "2024-02-08",
"value": 8
},
{
"date": "2024-02-09",
"value": 6
},
{
"date": "2024-02-10",
"value": 7
},
{
"date": "2024-02-11",
"value": 2
},
{
"date": "2024-02-12",
"value": 10
},
{
"date": "2024-02-15",
"value": 1
},
{
"date": "2024-02-16",
"value": 2
},
{
"date": "2024-02-18",
"value": 1
},
{
"date": "2024-02-21",
"value": 1
},
{
"date": "2024-02-23",
"value": 3
},
{
"date": "2024-02-24",
"value": 9
},
{
"date": "2024-02-25",
"value": 4
},
{
"date": "2024-02-28",
"value": 1
},
{
"date": "2024-02-29",
"value": 2
},
{
"date": "2024-03-01",
"value": 14
},
{
"date": "2024-03-02",
"value": 1
},
{
"date": "2024-03-03",
"value": 11
},
{
"date": "2024-03-06",
"value": 13
},
{
"date": "2024-03-07",
"value": 6
},
{
"date": "2024-03-10",
"value": 5
},
{
"date": "2024-03-11",
"value": 12
},
{
"date": "2024-03-12",
"value": 2
},
{
"date": "2024-03-13",
"value": 10
},
{
"date": "2024-03-14",
"value": 8
},
{
"date": "2024-03-15",
"value": 12
},
{
"date": "2024-03-16",
"value": 1
},
{
"date": "2024-03-21",
"value": 1
},
{
"date": "2024-03-22",
"value": 12
},
{
"date": "2024-03-23",
"value": 10
},
{
"date": "2024-03-24",
"value": 3
},
{
"date": "2024-03-25",
"value": 6
},
{
"date": "2024-03-28",
"value": 9
},
{
"date": "2024-03-29",
"value": 6
},
{
"date": "2024-03-30",
"value": 1
},
{
"date": "2024-04-01",
"value": 6
},
{
"date": "2024-04-03",
"value": 8
},
{
"date": "2024-04-04",
"value": 1
},
{
"date": "2024-04-06",
"value": 1
},
{
"date": "2024-04-07",
"value": 3
},
{
"date": "2024-04-08",
"value": 9
},
{
"date": "2024-04-11",
"value": 2
},
{
"date": "2024-04-12",
"value": 7
},
{
"date": "2024-04-14",
"value": 7
},
{
"date": "2024-04-16",
"value": 1
},
{
"date": "2024-04-19",
"value": 14
},
{
"date": "2024-04-20",
"value": 1
},
{
"date": "2024-04-22",
"value": 14
},
{
"date": "2024-04-25",
"value": 7
},
{
"date": "2024-04-27",
"value": 1
},
{
"date": "2024-04-28",
"value": 5
},
{
"date": "2024-04-29",
"value": 4
},
{
"date": "2024-04-30",
"value": 3
},
{
"date": "2024-05-02",
"value": 5
},
{
"date": "2024-05-03",
"value": 1
},
{
"date": "2024-05-04",
"value": 1
},
{
"date": "2024-05-07",
"value": 1
},
{
"date": "2024-05-10",
"value": 8
},
{
"date": "2024-05-11",
"value": 6
},
{
"date": "2024-05-13",
"value": 1
},
{
"date": "2024-05-15",
"value": 10
},
{
"date": "2024-05-18",
"value": 1
},
{
"date": "2024-05-19",
"value": 14
},
{
"date": "2024-05-21",
"value": 1
},
{
"date": "2024-05-22",
"value": 6
},
{
"date": "2024-05-23",
"value": 14
},
{
"date": "2024-05-26",
"value": 1
},
{
"date": "2024-05-27",
"value": 2
},
{
"date": "2024-05-29",
"value": 9
},
{
"date": "2024-05-30",
"value": 12
},
{
"date": "2024-05-31",
"value": 7
},
{
"date": "2024-06-02",
"value": 14
},
{
"date": "2024-06-03",
"value": 8
},
{
"date": "2024-06-04",
"value": 1
},
{
"date": "2024-06-07",
"value": 1
},
{
"date": "2024-06-08",
"value": 5
},
{
"date": "2024-06-10",
"value": 13
},
{
"date": "2024-06-11",
"value": 9
},
{
"date": "2024-06-12",
"value": 9
},
{
"date": "2024-06-14",
"value": 8
},
{
"date": "2024-06-15",
"value": 13
},
{
"date": "2024-06-16",
"value": 10
},
{
"date": "2024-06-17",
"value": 2
},
{
"date": "2024-06-21",
"value": 1
},
{
"date": "2024-06-24",
"value": 13
},
{
"date": "2024-06-25",
"value": 1
},
{
"date": "2024-06-26",
"value": 4
},
{
"date": "2024-06-30",
"value": 11
},
{
"date": "2024-07-02",
"value": 7
},
{
"date": "2024-07-03",
"value": 2
},
{
"date": "2024-07-04",
"value": 13
},
{
"date": "2024-07-06",
"value": 1
},
{
"date": "2024-07-07",
"value": 4
},
{
"date": "2024-07-08",
"value": 2
},
{
"date": "2024-07-09",
"value": 8
},
{
"date": "2024-07-14",
"value": 3
},
{
"date": "2024-07-18",
"value": 4
},
{
"date": "2024-07-19",
"value": 1
},
{
"date": "2024-07-21",
"value": 13
},
{
"date": "2024-07-23",
"value": 4
},
{
"date": "2024-07-24",
"value": 9
},
{
"date": "2024-07-26",
"value": 7
},
{
"date": "2024-07-27",
"value": 13
},
{
"date": "2024-07-28",
"value": 6
},
{
"date": "2024-07-29",
"value": 1
},
{
"date": "2024-07-30",
"value": 1
},
{
"date": "2024-07-31",
"value": 14
},
{
"date": "2024-08-01",
"value": 10
},
{
"date": "2024-08-02",
"value": 1
},
{
"date": "2024-08-03",
"value": 7
},
{
"date": "2024-08-04",
"value": 1
},
{
"date": "2024-08-06",
"value": 11
},
{
"date": "2024-08-07",
"value": 10
},
{
"date": "2024-08-08",
"value": 11
},
{
"date": "2024-08-09",
"value": 1
},
{
"date": "2024-08-11",
"value": 9
},
{
"date": "2024-08-12",
"value": 11
},
{
"date": "2024-08-15",
"value": 9
},
{
"date": "2024-08-16",
"value": 1
},
{
"date": "2024-08-17",
"value": 13
},
{
"date": "2024-08-18",
"value": 12
},
{
"date": "2024-08-20",
"value": 2
},
{
"date": "2024-08-21",
"value": 8
},
{
"date": "2024-08-22",
"value": 13
},
{
"date": "2024-08-23",
"value": 4
},
{
"date": "2024-08-24",
"value": 1
},
{
"date": "2024-08-26",
"value": 2
},
{
"date": "2024-08-29",
"value": 9
},
{
"date": "2024-08-30",
"value": 1
},
{
"date": "2024-09-02",
"value": 13
},
{
"date": "2024-09-03",
"value": 13
},
{
"date": "2024-09-04",
"value": 2
},
{
"date": "2024-09-07",
"value": 4
},
{
"date": "2024-09-08",
"value": 1
},
{
"date": "2024-09-11",
"value": 1
},
{
"date": "2024-09-12",
"value": 7
},
{
"date": "2024-09-14",
"value": 3
},
{
"date": "2024-09-15",
"value": 3
},
{
"date": "2024-09-16",
"value": 7
},
{
"date": "2024-09-18",
"value": 6
},
{
"date": "2024-09-20",
"value": 8
},
{
"date": "2024-09-21",
"value": 7
},
{
"date": "2024-09-22",
"value": 2
},
{
"date": "2024-09-23",
"value": 14
},
{
"date": "2024-09-25",
"value": 1
},
{
"date": "2024-09-26",
"value": 3
},
{
"date": "2024-09-27",
"value": 7
},
{
"date": "2024-09-28",
"value": 2
},
{
"date": "2024-09-29",
"value": 9
},
{
"date": "2024-09-30",
"value": 1
},
{
"date": "2024-10-01",
"value": 14
},
{
"date": "2024-10-03",
"value": 5
},
{
"date": "2024-10-04",
"value": 6
},
{
"date": "2024-10-05",
"value": 1
},
{
"date": "2024-10-06",
"value": 13
},
{
"date": "2024-10-07",
"value": 1
},
{
"date": "2024-10-08",
"value": 3
},
{
"date": "2024-10-14",
"value": 1
},
{
"date": "2024-10-15",
"value": 1
},
{
"date": "2024-10-16",
"value": 4
},
{
"date": "2024-10-17",
"value": 5
},
{
"date": "2024-10-20",
"value": 5
},
{
"date": "2024-10-22",
"value": 4
},
{
"date": "2024-10-23",
"value": 1
},
{
"date": "2024-10-24",
"value": 14
},
{
"date": "2024-10-26",
"value": 8
},
{
"date": "2024-10-27",
"value": 13
},
{
"date": "2024-10-30",
"value": 4
},
{
"date": "2024-11-01",
"value": 11
},
{
"date": "2024-11-02",
"value": 1
},
{
"date": "2024-11-03",
"value": 6
},
{
"date": "2024-11-04",
"value": 4
},
{
"date": "2024-11-05",
"value": 1
},
{
"date": "2024-11-06",
"value": 1
},
{
"date": "2024-11-08",
"value": 5
},
{
"date": "2024-11-09",
"value": 12
},
{
"date": "2024-11-10",
"value": 1
},
{
"date": "2024-11-11",
"value": 11
},
{
"date": "2024-11-14",
"value": 8
},
{
"date": "2024-11-15",
"value": 1
},
{
"date": "2024-11-18",
"value": 11
},
{
"date": "2024-11-19",
"value": 1
},
{
"date": "2024-11-20",
"value": 14
},
{
"date": "2024-11-22",
"value": 1
},
{
"date": "2024-11-23",
"value": 1
},
{
"date": "2024-11-24",
"value": 15
},
{
"date": "2024-11-26",
"value": 8
},
{
"date": "2024-11-27",
"value": 11
},
{
"date": "2024-11-28",
"value": 2
},
{
"date": "2024-11-30",
"value": 13
},
{
"date": "2024-12-02",
"value": 13
},
{
"date": "2024-12-03",
"value": 1
},
{
"date": "2024-12-04",
"value": 3
},
{
"date": "2024-12-05",
"value": 1
},
{
"date": "2024-12-06",
"value": 4
},
{
"date": "2024-12-07",
"value": 15
},
{
"date": "2024-12-08",
"value": 9
},
{
"date": "2024-12-09",
"value": 5
},
{
"date": "2024-12-11",
"value": 1
},
{
"date": "2024-12-12",
"value": 4
},
{
"date": "2024-12-14",
"value": 13
},
{
"date": "2024-12-15",
"value": 1
},
{
"date": "2024-12-16",
"value": 1
},
{
"date": "2024-12-18",
"value": 2
},
{
"date": "2024-12-24",
"value": 2
},
{
"date": "2024-12-26",
"value": 7
},
{
"date": "2024-12-27",
"value": 1
},
{
"date": "2024-12-30",
"value": 1
},
{
"date": "2024-12-31",
"value": 8
}
],
"calendar.startDate": "2024-01-01",
"calendar.endDate": "2024-12-31",
"calendar.colorMode": "ramp"
}Daily signups
Half a year of daily signups in a blue intensity ramp.
API overrides for this example
{
"calendar.data": [
{
"date": "2024-01-01",
"value": 28
},
{
"date": "2024-01-02",
"value": 3
},
{
"date": "2024-01-03",
"value": 35
},
{
"date": "2024-01-04",
"value": 28
},
{
"date": "2024-01-06",
"value": 18
},
{
"date": "2024-01-08",
"value": 8
},
{
"date": "2024-01-09",
"value": 31
},
{
"date": "2024-01-12",
"value": 1
},
{
"date": "2024-01-13",
"value": 21
},
{
"date": "2024-01-15",
"value": 1
},
{
"date": "2024-01-17",
"value": 12
},
{
"date": "2024-01-20",
"value": 5
},
{
"date": "2024-01-22",
"value": 1
},
{
"date": "2024-01-24",
"value": 37
},
{
"date": "2024-01-27",
"value": 2
},
{
"date": "2024-01-29",
"value": 31
},
{
"date": "2024-02-01",
"value": 1
},
{
"date": "2024-02-02",
"value": 1
},
{
"date": "2024-02-03",
"value": 27
},
{
"date": "2024-02-06",
"value": 12
},
{
"date": "2024-02-08",
"value": 14
},
{
"date": "2024-02-11",
"value": 14
},
{
"date": "2024-02-12",
"value": 12
},
{
"date": "2024-02-13",
"value": 17
},
{
"date": "2024-02-14",
"value": 1
},
{
"date": "2024-02-16",
"value": 1
},
{
"date": "2024-02-19",
"value": 16
},
{
"date": "2024-02-20",
"value": 1
},
{
"date": "2024-02-21",
"value": 1
},
{
"date": "2024-02-23",
"value": 1
},
{
"date": "2024-02-24",
"value": 12
},
{
"date": "2024-02-25",
"value": 20
},
{
"date": "2024-02-26",
"value": 6
},
{
"date": "2024-02-27",
"value": 10
},
{
"date": "2024-02-28",
"value": 18
},
{
"date": "2024-03-03",
"value": 38
},
{
"date": "2024-03-07",
"value": 26
},
{
"date": "2024-03-08",
"value": 1
},
{
"date": "2024-03-09",
"value": 4
},
{
"date": "2024-03-10",
"value": 16
},
{
"date": "2024-03-11",
"value": 12
},
{
"date": "2024-03-12",
"value": 1
},
{
"date": "2024-03-13",
"value": 1
},
{
"date": "2024-03-14",
"value": 14
},
{
"date": "2024-03-15",
"value": 1
},
{
"date": "2024-03-16",
"value": 5
},
{
"date": "2024-03-18",
"value": 4
},
{
"date": "2024-03-19",
"value": 6
},
{
"date": "2024-03-21",
"value": 7
},
{
"date": "2024-03-22",
"value": 3
},
{
"date": "2024-03-23",
"value": 6
},
{
"date": "2024-03-24",
"value": 10
},
{
"date": "2024-03-25",
"value": 4
},
{
"date": "2024-03-26",
"value": 36
},
{
"date": "2024-03-27",
"value": 1
},
{
"date": "2024-03-28",
"value": 12
},
{
"date": "2024-03-30",
"value": 8
},
{
"date": "2024-04-02",
"value": 7
},
{
"date": "2024-04-03",
"value": 4
},
{
"date": "2024-04-05",
"value": 23
},
{
"date": "2024-04-06",
"value": 20
},
{
"date": "2024-04-08",
"value": 10
},
{
"date": "2024-04-09",
"value": 1
},
{
"date": "2024-04-10",
"value": 39
},
{
"date": "2024-04-11",
"value": 6
},
{
"date": "2024-04-13",
"value": 12
},
{
"date": "2024-04-14",
"value": 14
},
{
"date": "2024-04-15",
"value": 32
},
{
"date": "2024-04-16",
"value": 29
},
{
"date": "2024-04-17",
"value": 11
},
{
"date": "2024-04-18",
"value": 8
},
{
"date": "2024-04-19",
"value": 3
},
{
"date": "2024-04-21",
"value": 2
},
{
"date": "2024-04-23",
"value": 22
},
{
"date": "2024-04-24",
"value": 1
},
{
"date": "2024-04-26",
"value": 1
},
{
"date": "2024-04-28",
"value": 39
},
{
"date": "2024-04-30",
"value": 3
},
{
"date": "2024-05-01",
"value": 1
},
{
"date": "2024-05-04",
"value": 20
},
{
"date": "2024-05-05",
"value": 10
},
{
"date": "2024-05-06",
"value": 18
},
{
"date": "2024-05-08",
"value": 28
},
{
"date": "2024-05-09",
"value": 33
},
{
"date": "2024-05-10",
"value": 2
},
{
"date": "2024-05-11",
"value": 16
},
{
"date": "2024-05-12",
"value": 13
},
{
"date": "2024-05-14",
"value": 27
},
{
"date": "2024-05-16",
"value": 25
},
{
"date": "2024-05-18",
"value": 36
},
{
"date": "2024-05-19",
"value": 4
},
{
"date": "2024-05-20",
"value": 32
},
{
"date": "2024-05-22",
"value": 40
},
{
"date": "2024-05-23",
"value": 30
},
{
"date": "2024-05-24",
"value": 8
},
{
"date": "2024-05-26",
"value": 3
},
{
"date": "2024-05-27",
"value": 1
},
{
"date": "2024-05-28",
"value": 1
},
{
"date": "2024-05-29",
"value": 19
},
{
"date": "2024-05-30",
"value": 40
},
{
"date": "2024-05-31",
"value": 2
},
{
"date": "2024-06-01",
"value": 5
},
{
"date": "2024-06-03",
"value": 3
},
{
"date": "2024-06-04",
"value": 26
},
{
"date": "2024-06-06",
"value": 20
},
{
"date": "2024-06-07",
"value": 14
},
{
"date": "2024-06-08",
"value": 19
},
{
"date": "2024-06-11",
"value": 10
},
{
"date": "2024-06-12",
"value": 1
},
{
"date": "2024-06-15",
"value": 32
},
{
"date": "2024-06-16",
"value": 25
},
{
"date": "2024-06-18",
"value": 19
},
{
"date": "2024-06-19",
"value": 29
},
{
"date": "2024-06-20",
"value": 38
},
{
"date": "2024-06-21",
"value": 33
},
{
"date": "2024-06-23",
"value": 17
},
{
"date": "2024-06-24",
"value": 5
},
{
"date": "2024-06-26",
"value": 15
},
{
"date": "2024-06-27",
"value": 1
},
{
"date": "2024-06-28",
"value": 33
},
{
"date": "2024-06-29",
"value": 1
},
{
"date": "2024-06-30",
"value": 23
},
{
"date": "2024-07-02",
"value": 34
},
{
"date": "2024-07-04",
"value": 9
},
{
"date": "2024-07-05",
"value": 1
},
{
"date": "2024-07-06",
"value": 19
},
{
"date": "2024-07-07",
"value": 25
},
{
"date": "2024-07-08",
"value": 3
},
{
"date": "2024-07-09",
"value": 2
},
{
"date": "2024-07-10",
"value": 4
},
{
"date": "2024-07-12",
"value": 21
},
{
"date": "2024-07-13",
"value": 11
},
{
"date": "2024-07-14",
"value": 1
},
{
"date": "2024-07-16",
"value": 1
},
{
"date": "2024-07-17",
"value": 29
}
],
"calendar.startDate": "2024-01-01",
"calendar.endDate": "2024-07-18",
"calendar.colorMode": "ramp",
"calendar.colors": [
"#bfdbfe",
"#60a5fa",
"#2563eb",
"#1e3a8a"
]
}All calendar heatmap styles
Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.
Use cases
What developers typically build with the calendar heatmap component.
- Contribution / activity graphs (commits, posts, workouts)
- Streak and habit-tracker cards
- Daily-metric summaries (signups, sales, sessions) over a year
- Daily-returns or net-change calendars for finance
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 the sample design'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
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Property reference
Every property the calendar heatmap component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| data | object[] | text | [] | Days: array of { date: 'YYYY-MM-DD', value }. |
| startDate | string | text | — | Range start (ISO); defaults to the earliest date in the data. |
| endDate | string | text | — | Range end (ISO); defaults to the latest date in the data. |
| weekStart | 'sunday' | 'monday' | sundaymonday | "sunday" | Which day each week column starts on. |
| colorMode | 'ramp' | 'diverging' | rampdiverging | "ramp" | 'ramp' colors by intensity in one hue; 'diverging' colors +/− values. |
| colors | color[] | text | [] | Explicit level swatches (lightest→darkest) for ramp mode. |
| baseColor | color | #216e39 | "#216e39" | Ramp hue used when no swatches are given. |
| emptyColor | color | #ebedf0 | "#ebedf0" | Fill for empty / zero days. |
| positiveColor | color | #16a34a | "#16a34a" | Up color in diverging mode. |
| negativeColor | color | #dc2626 | "#dc2626" | Down color in diverging mode. |
| scaleMax | number | 0 | 0 | Value mapped to the darkest level (0 = auto). |
| levels | number | 4 | 4 | Number of intensity buckets in ramp mode. |
| showMonthLabels | boolean | true | true | Draw month labels above the grid. |
| showWeekdayLabels | boolean | true | true | Draw Mon/Wed/Fri labels beside the grid. |
| labelColor | color | #64748b | "#64748b" | Label text color. |
| cellRadius | number | 2 | 2 | Corner radius of each day cell (px). |
| gap | number | 3 | 3 | Gap between cells (px). |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |
Frequently Asked Questions
Send '<key>.data' as an array of { date: 'YYYY-MM-DD', value } objects — each day is a cell colored by its value; missing days render empty.
Yes — set startDate and endDate (ISO) to fix the grid to, say, a full calendar year; without them the range fits the earliest and latest dates in the data.
Set colorMode to "diverging" and the grid colors positive values with positiveColor and negatives with negativeColor — ideal for daily returns or net change.