Highcharts plotband label zIndex

Question

I'm trying to place a plotBand below axis ticks, but its label above them.

Since labels inherit the band's zIndex and offer no way of specifying this attribute, is there a way that doesn't require me to change the zIndex after the graph is drawn?

See an example here, where I wanted the label to appear in front of the yAxis tick.

I've seen a potential solution here, but was wondering if there is a better way to accomplish it.

Answer 1

Much of Highcharts does not seem to support the zIndex attribute out of the box, as it uses SVG. The answer from this question states:

"Z index in SVG is defined by the order the elements appear in the document. You will have to change the element order if you want to bring a specific shape to the top."

That is what the .toFront() function does, so you may be stuck using that.

I wrote a small snippet that updates all plotBand's labels to the front upon a chart's first render:

Highcharts.Chart.prototype.firstRender = (function (func){
     return function(){
         func.apply(this, arguments);
         $.each(this.axes, function(){
             $.each(this.plotLinesAndBands, function(){
                 this.label.toFront(); 
             });
         });
         this.tooltip.label.toFront();
         this.seriesGroup.label.toFront();
     }
 } (Highcharts.Chart.prototype.firstRender));

Here is an example on JSFiddle. Let me know if this accomplishes what you need.