5

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.

KarSho
  • 5,699
  • 13
  • 45
  • 78
LythQ
  • 51
  • 1
  • 2

1 Answers1

3

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.

Community
  • 1
  • 1
MatthewKremer
  • 1,549
  • 1
  • 14
  • 25
  • 1
    Thanks for the quick reply. I ended up doing something like [this](http://jsfiddle.net/74ZVQ/1/), as the toFront method made the text go above data and tooltips, which was not desirable. How does this workaround look? – LythQ Mar 11 '13 at 14:14
  • That works, however I'm not quite sure how many plot bands you will have with labels, or if "3" will always be a desirable number. I updated my solution to work on first render instead of on redraw. Honestly, it's most likely up to preference, but if you include my snippet at the top of your code, it will always work for all charts (plotBand labels will always be in front) without any additional code. – MatthewKremer Mar 11 '13 at 14:19
  • Ah crap, didn't see the part where you said the text went above data and tooltips...let me see if there is an easy work around for that or not. – MatthewKremer Mar 11 '13 at 14:21
  • That looks nice, but if I'm sure about the zIndex I want to place the labels into is there any advantage over the solution I came up with? Honestly, I think mine looks simpler and does not ignore other elements whose zIndex I want to be higher than plot line and plot band labels. – LythQ Mar 11 '13 at 14:41
  • Like I said, it's most likely up to preference. If you know the zIndex that works for each chart (if you even have multiple charts), then your solution may be better for you. When I work with highcharts, I'm working with a ton of charts at one time, and tend to lean towards solutions that don't require me to have "chart by chart" code, but that's just me. – MatthewKremer Mar 11 '13 at 14:47
  • Indeed, if I had no control over the chart perhaps your solution would be preferable. However, since the charts I'm working with are generated by a script which I have total control over, it is preferable to use the specific zIndex so other elements are taken into account (like they would if labels offered an independent zIndex from the plotLine or plotBand they belong to). – LythQ Mar 11 '13 at 17:27