Highcharts drilldown chart: Display/Hide Plot Bands and Lines on drilldown or drillup

Question

I have a drill-down chart in Highcharts where I want the plot bands and plot lines to be hidden when a drill-down occurs.

I used the drill-down event to successfully hide the plot bands, but it seems the Plot band label reappears when the drill-down is shown.

See this fiddle: http://jsfiddle.net/jmunger/KFpJC/

The code to hide or display the bands and lines is as follows:

    events: {
        drilldown: function () {
            var myAxis = this.xAxis[0];
            var myPlotBands = myAxis.plotLinesAndBands;
            $.each(myPlotBands, function (i, linesAndBands) {
                if (linesAndBands.label) {
                    linesAndBands.label.hide();
                    linesAndBands.label.opacity = 0;
                }
                linesAndBands.svgElem.hide();
            });
        },
        drillup: function () {
            $.each(this.xAxis[0].plotLinesAndBands, function (i, linesAndBands) {
                linesAndBands.svgElem.show();
                if (linesAndBands.label) {
                    linesAndBands.label.show();
                }
            });
        }
    }

Is there a way to make sure the label is hidden on a drill-down, and reappears on a drill-up? The line:

linesAndBands.label.hide();

effectively hides the label but it reappears when the drill-down chart appears.

Answer 1

Instead of .hide() you can usee .css() instead: http://jsfiddle.net/KFpJC/2/

        events: {
            drilldown: function () {
                var myAxis = this.xAxis[0];
                var myPlotBands = myAxis.plotLinesAndBands;
                $.each(myPlotBands, function (i, linesAndBands) {
                    linesAndBands.svgElem.hide();
                    if (linesAndBands.label) {
                        linesAndBands.label.css({
                            display: 'none'   
                        });
                    }
                });
            },
            drillup: function () {
                $.each(this.xAxis[0].plotLinesAndBands, function (i, linesAndBands) {
                    linesAndBands.svgElem.show();
                    if (linesAndBands.label) {
                        linesAndBands.label.css({
                            display: 'block'   
                        });
                    }
                });
            }
        }

Most probably, label returns because it's positioned (x/y position and visibility) after other graphics are placed on a plotting area.