CODEWITHSUNDEEP
javascripthighchartsheatmap
sherlock85
sherlock85

Reputation: 899

Highcharts heat map does not work with a wide range of data values (min: 0, max: 5,000,000)

I try to draw a heat map (50 x 100) using Highcharts. I noticed that the the chart is not displaying properly when my data values are in wide range (from 0 to 5,000,000). However, if I change my data values to smaller range (for example from 0 to 1) the chart seems to be okay.

    $('#heatmap').highcharts({

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

    credits: {
        enabled: false
    },

    plotOptions: {
        series: {
            events: {
                click: function (event) {
                    alert('event!');
                }
            }
        }
    },


    title: {
        text: 'Sample title yo'
    },

    xAxis: {
        categories: xCategories,
        title: null
    },

    yAxis: {
        categories: yCategories,
        title: null
    },

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

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

    tooltip: {
        formatter: function () {
            return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' + this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
        }
    },

    series: [{
        name: 'Lorem ipsum',
        borderWidth: 1,
        data: data,
        dataLabels: {
            enabled: false,
            color: 'black',
            style: {
                textShadow: 'none',
                HcTextStroke: null
            }
        }
    }]

});

Here's my fiddle: http://jsfiddle.net/bpp8ahyc/4/

Is there anything I can do to show large values?

Upvotes: 0

Views: 2169

Answers (1)

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

You need to increase value of turboThreshold or set as unlimited (by 0).

plotOptions: {
        series: {
            turboThreshold:0
        }
}

Example: http://jsfiddle.net/bpp8ahyc/5/

Upvotes: 3

Related Questions