Highcharts tooltip is hidden behind other charts

Question

When putting multiple charts tooltips from upper charts are hidden behind others.

I found some tips on how to it but nothing helped. Is there anyway to keep tooltips on top of charts?

The example is here: http://jsfiddle.net/Zw3uM/

Thanks a lot!

Answer 1

You can use tooltip pisitioner:

http://api.highcharts.com/highcharts#tooltip.positioner

Answer 2

The problem is due to each highchart container having its own stacking context. This is because the highcharts-container has both position: relative and z-index: 0 (css dynamically applied by the highcharts library).

So the z-index of the tooltip has meaning only in its parent highchart container.

To fix this we need to override the (z-index: 0) rule for the highcharts-container using the following:

.highcharts-container 
{ 
    z-index: auto !important;
    ...
}

This way all hightcharts-containers & their children would share the same stacking context and their z-indices would apply the desired effect.

You can check the fix here: http://jsfiddle.net/w5bLo1cw/4/

Answer 3

This is pure html : Any div element loaded after ( meaning appearing after on the html page) will always be in front.

In order to get the first chart tooltip be in front of the second : load the second in first and set its y position on the page using an absolute or relative position in css :

I've change their order, putting the container2 in first in html:

<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>

Then set the position of container2 to be under the first one (thanks to the top style attribute) :

div[id="container2"] {
    position:absolute;
    top:200px;
}

Here is the result : http://jsfiddle.net/Zw3uM/3/