charts/docs/basic/heatmap.md

Day-based Month-wise data

The heatmap is a representation of day-wise data (similar to the GitHub Contribution Graph). It spaces out data values linearly, across 5 levels (zero data kept exclusive).

In this case, the data has three parts,

let data = {
	dataPoints: {
		"1426744959": 20,
		"1463673055": 113,
		"1476892421": 57,
		// ...
	},
	start: startDate, // a JS date object
	end: endDate
}

(We are working on making the start date and end date implicit and optional).

The chart is rendered by the type heatmap:

let chart = new Chart("#heatmap", {
    type: 'heatmap',
    data: data,
})

Setting discreteDomains to 0 allows for a continous distribution of heat squares (as on GitHub), rather than showing the month-wise separation. A different set of colors can also be specified.

discreteDomains: 0, // default 1
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],