Search code examples
angularhighchartsheatmapdrilldown

I want to implement drilldown for heatmap or heatstock of highcharts


I am not able to add drilldown for heatmap or heatstock of highcharts. There are examples present for drilldown where only one data is required.

E.g:
enter code hereenter code here`data: [5, 7, 3]

But not for 2D or 3D data.

E.g:

1. data: [[1479220200000, 107.11],
        [1479306600000, 109.99],
        [1479393000000, 109.95]]

2. data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24]]

Can anyone please check if this can be implemented or its a bug in highcharts.?


Solution

  • You can add drilldown functionality to heatmap in the same way as to other series types. Example:

    series: [{
        data: [{
            x: 0,
            y: 0,
            value: 10,
            drilldown: 'animals'
        }, {
            x: 0,
            y: 0,
            value: 10
        }, {
            x: 0,
            y: 1,
            value: 19
        }, {
            x: 1,
            y: 0,
            value: 92
        }, {
            x: 1,
            y: 1,
            value: 58
        }],
        dataLabels: {
            enabled: true,
            color: '#000000'
        }
    }],
    drilldown: {
        series: [{
            id: 'animals',
            data: [
                [0, 9, 7],
                [1, 10, 4],
                [2, 6, 3]
            ]
        }]
    }
    

    Live demo: https://jsfiddle.net/BlackLabel/mzfpjeht/