How do I add labels to a subdomain in cal-heatmap?

Question

I have a cal-heatmap that is displaying the last week of data. Each row is a day and each column is an hour. I have labels on the days but not the hours. How can I add these?

var cal = new CalHeatMap();
    cal.init({
        itemSelector: "#cal-heatmap",
        domain: "day",
        subDomain: "hour",
        rowLimit: 1,
        domainGutter: 0,
        data: data,
        start: new Date(_.keys(data)[0] * 1000),
        cellSize: 15,
        cellPadding: 5,
        cellRadius: 3,
        range: 7,
        verticalOrientation: true,
        displayLegend: false,
        label: {
            position: "left",
            offset: {
                x: 20,
                y: 12
            },
            width: 110
        },
        legend: [40, 80, 120, 160, 200, 240, 280, 320],
        legendColors: ["#f9eb49", "#d66938"]
    });

score 1 · Accepted Answer · answered Mar 21 '16 at 19:48

According to the author, this is not yet possible so I've come up with a workaround that looks decent. I just made another div above my main cal-heatmap that shows a single row with an empty label so that it lines up with the table below. Then I populate it with the below code:

var labels = new CalHeatMap();
    labels.init({
        itemSelector: "#cal-heatmap-labels",
        domain: "day",
        subDomain: "hour",
        rowLimit: 1,
        domainGutter: 0,
        data: {},
        cellSize: 15,
        cellPadding: 5,
        cellRadius: 3,
        range: 1,
        verticalOrientation: true,
        displayLegend: false,
        tooltip: true,
        subDomainTextFormat: "%-I",
        subDomainDateFormat: "%-I%p",
        domainLabelFormat: "",
        label: {
            position: "left",
            offset: {
                x: 20,
                y: 12
            },
            width: 110
        }
    });

This is working for me and looks half decent. Hopefully this helps someone at least until this feature is developed.

How do I add labels to a subdomain in cal-heatmap?

1 Answers1