CODEWITHSUNDEEP
javascripthighchartsheatmap
user435245
user435245

Reputation: 859

Highchart Heatmap chart for days in a month

I just need to create a high chart heat map as below:
sample expected highchart

What I have developed is to define the month's name in the x axis and define each day in MONTH as a y-category, but the problem is that High chart will set all y categories in a linear position on the y axis, oppositely I need them to be grouped in 7 days. The code I implemented so far is as below:

    chart: {
        type: 'heatmap',
        marginTop: 40,
        marginBottom: 40
    },


    title: {
        text: 'Last Six Month'
    },

    xAxis: {
        categories: ['Mar', 'Apr', 'May', 'June', 'July', 'Aug'],

    },



    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 320
    },


    series: [{
        name: 'Last Six Month',
        borderWidth: 1,
        data: [[0,1,2],[0,2,2],[0,3,2],[0,4,2],[0,5,2],[0,6,2],[0,7,2],[0,8,2],[0,9,2],[0,10,2], [1,1,2],[1,2,2],[1,3,2],[1,4,2],[1,5,2],[1,6,2],[1,7,2],[1,8,2],[1,9,2],[1,10,2]],
        dataLabels: {
            enabled: true,
            color: 'black',
            style: {
                textShadow: 'none',
                HcTextStroke: null
            }
        }
    }]

My current state is attached as below : enter image description hereHow can I fix this issue and sort them in weeks of month?

Upvotes: 1

Views: 1029

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

If you want to use categories, then add just some empty ones:

categories: ['Mar', '', '', '', '', 'Apr', '', '', '', '', 'May', '', '', '', '', 'June', '', '', '', '', 'July', ''', '', '', '', Aug'],

Or just use datetime xAxis. Note: In that case you need to use x-values(timestamps) for each of points.

Upvotes: 2

Related Questions