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,
});

If you wish you can configure the radius of heat squares

radius: 2, // default 0

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'],

Day-based Month-wise data

On this page