1

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

vegaelce
  • 115
  • 6

1 Answers1

0

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

ppotaczek
  • 36,341
  • 2
  • 14
  • 24
  • Thanks for that, it's working like a charm. But I can see an unexpected behaviour if I add a title to my legend. You can see the result here : http://jsfiddle.net/vegaelce/1s4dzct3. The title still appear in the main level whereas no legend item is available. To avoid this I tried to disable the legend in main level and use drilldown/drillup event to enable/disable it (the result is here : http://jsfiddle.net/vegaelce/8mxsta50), it works great when drilldown but it throws an error on drillup. Is it a bug or a problem in my drillup event ? – vegaelce Apr 13 '21 at 06:33
  • 1
    Hi @vegaelce, You can't update a legend during drilldown, but you can use show/hide method directly on a title. Example: http://jsfiddle.net/BlackLabel/o046k8zu/ – ppotaczek Apr 13 '21 at 10:02