angular-highcharts icon indicating copy to clipboard operation
angular-highcharts copied to clipboard

HeatMap chart Data issues

Open viralchauhan opened this issue 4 years ago • 2 comments

Heat map chart data not plot.

this.chart = new Chart({ data: { csv: document.getElementById('csv').innerHTML }, chart: { type: 'heatmap' },

            boost: {
                useGPUTranslations: true
            },

            title: {
                text: 'Highcharts heat map',
                align: 'left',
                x: 40
            },

            subtitle: {
                text: 'Temperature variation by day and hour through 2017',
                align: 'left',
                x: 40
            },

            xAxis: {
                type: 'datetime',
                min: Date.UTC(2017, 0, 1),
                max: Date.UTC(2019, 11, 31, 23, 59, 59),
                labels: {
                    align: 'left',
                    x: 5,
                    y: 14,
                    format: '{value:%B}' // long month
                },
                showLastLabel: false,
                tickLength: 16
            },

            yAxis: {
                title: {
                    text: null
                },
                labels: {
                    format: '{value}:00'
                },
                minPadding: 0,
                maxPadding: 0,
                startOnTick: false,
                endOnTick: false,
                tickPositions: [0, 6, 12, 18, 24],
                tickWidth: 1,
                min: 0,
                max: 23,
                reversed: true
            },

            colorAxis: {
                stops: [
                    [0, '#3060cf'],
                    [0.5, '#fffbbc'],
                    [0.9, '#c4463a'],
                    [1, '#c4463a']
                ],
                min: -15,
                max: 25,
                startOnTick: false,
                endOnTick: false,
                labels: {
                    format: '{value}℃'
                }
            },
           
            series: [{
                type: undefined,
                 
                //boostThreshold: 100,
                borderWidth: 0,
                nullColor: '#EFEFEF',
                colsize: 24 * 36e5, // one day
                tooltip: {
                    headerFormat: 'Temperature<br/>',
                    pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
                },
                //data: this.heatchartdata,
                turboThreshold: 7000 // #3404, remove after 4.0.5 release
            }]

        });

reference Data from : https://www.highcharts.com/demo/heatmap-canvas

viralchauhan avatar Mar 31 '20 15:03 viralchauhan

Any update on this? Thanks @viralchauhan

attilacsanyi avatar Jun 30 '20 17:06 attilacsanyi

For me the issue was solved with the following marker plot settings @viralchauhan @cebor :

plotOptions: {
  heatmap: {
    // Markers were turned off in my case in plotOptions.series, so heatmap also used it and the colors were not rendered
    marker: {enabled: true} 
  }
}

attilacsanyi avatar Jul 01 '20 11:07 attilacsanyi