CODEWITHSUNDEEP
highchartsheatmap
prakash
prakash

Reputation: 63

Highcharts heatmap not rendering squares or rectangles

Can someone help me to understand what is wrong here. Everything seems perfect.

http://jsfiddle.net/prakash4mail/nt86gj7z/1/

$(function () {

    $('#container').highcharts({

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


        series: [{
            borderWidth: 1,
            data: [[2020-04-01, 18000, 29060],[2020-04-01, 18500, 9920],[2020-04-01, 19000, 32160],[2020-04-02, 18000, 12400],[2020-04-02, 18500, 91880],[2020-04-02, 19000, 54000],[2020-04-03, 18000, 63540],[2020-04-03, 18500, 43420],[2020-04-03, 19000, 43420]],
            dataLabels: {
                enabled: true,
                color: '#000000'
            },
        }]

    });
});

heatMap showing lines instead of squares

Upvotes: 0

Views: 413

Answers (2)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

As I understood you would like to achieve something like is rendered here: http://jsfiddle.net/BlackLabel/o6ywag42/

Notice how the data structure looks like in this demo from Highcharts demo base: https://jsfiddle.net/BlackLabel/uofntb4y/ - if you want to keep the points as a square the 'y' value must be growing one by one, like here: http://jsfiddle.net/BlackLabel/o7bgq1pu/

And to show your truly y scale you can use the categories feature. 

yAxis: {
    categories: ['18000', '18500', '19000']
},

API: https://api.highcharts.com/highcharts/yAxis.categories

EDIT:

Another solution suggested by @prakash is to use the series.rowsize property and series.colsize to fit the squares.

API: https://api.highcharts.com/highcharts/series.heatmap.rowsize

API: https://api.highcharts.com/highcharts/series.heatmap.colsize

Upvotes: 0

prakash
prakash

Reputation: 63

The exact answer is rowsize: 500 (from UI perspective - height, YAxis difference between each point) and colsize: 86400000 (one day each, x-axis difference between each point). Missing this was causing box not to appear.

Upvotes: 1

Related Questions