highchartslegendtreemapdrilldown

Highcharts drilldown treemap legend


I'm working on a drilldown treemap and the render is exactly what I want. My problem is about the legend. I used colorAxis for the drilldown level and I would like to hide the legend on the main level (one color by tile) but display the graduate color axis legend on the sub level, only for the sub-serie displayed.

I made an example here : http://jsfiddle.net/vegaelce/4dLopjwv

I used the property legend to display it :

    legend: {
    enabled: true
},

but it displays the legend of each colorAxis on the sublevel. How can I hide all the legend except the one corresponding to the sub-serie displayed ? Thanks in advance


Solution

  • You can use drilldown and drillup events and update the visible property of the right color axis.

        chart: {
            type: 'treemap',
            events: {
                drilldown: function(e) {
                    const colorAxis = this.colorAxis[e.seriesOptions.colorAxis];
                    if (colorAxis) {
                        colorAxis.update({
                            visible: true
                        }, false);
                    }
                },
                drillup: function() {
                    this.colorAxis.forEach(function(cAxis){
                        if (cAxis.visible) {
                            cAxis.update({
                                visible: false
                            }, false);
                        }
                    });
                }
            }
        }
    

    Live demo: http://jsfiddle.net/BlackLabel/vtg7fdn6/

    API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#update