Tooltip appears under plotLine highcharts

Question

I have created a chart with Highcharts that plots two plotLines, one vertical and one horizontal. I have set their zIndex to 1001 and 1002 respectively to make sure that these lines can be seen above my column series.

Unfortunately, my tooltips appear BENEATH the plotLines, despite setting a higher zIndex property for the tooltips. Is this expected behaviour, and is there a workaround? Thank you in advance.

Picture

Plotlines above tooltip

PlotLine 1:

    plotLines: [{
        value: 55,
        color: '#ff0000',
        width: 1,
        zIndex: 1001,
        label: {
            text: 'Demand',
            style: {
                fontSize: '11px'
            }
        }
    }]

PlotLine 2:

 chart.yAxis[0].addPlotLine({
    value: marge,
    zIndex: 1002,
    color: 'rgb(243,152,20)',
    dashStyle: 'solid',
    width: 1,
    label: {
        text: 'Market price: $' + marge + '/bbl'
    }
  });

Tooltips:

 tooltip: {
    useHTML: true,
    zIndex:2005,
    formatter: function () {
        if (this.y != 0) {
            return '<b>' + this.series.name + '</b><br>Breakeaven : $' + this.y + '/bbl';
        } else {
            return false;
        }
    }
  },

jlbriggs jlbriggs · Accepted Answer · 2014-12-31T14:39:38

This is the type of thing that happens when silly z-index levels are used. :)

Setting the zIndex of the plotLine to 4, and not setting a zIndex for the tooltip seems to work fine:

http://jsfiddle.net/jlbriggs/6k1ookyn/2/

If 4 doesn't cover all of your scenarios...try 5 instead of 1000.

I believe the underlying issue that causes this has to do with the scope of zindex within Highcharts - the z index is relative to the element group that each element is within, and not relative to the overall document. (as far as I can remember from an explanation about it in the past)

Tooltip appears under plotLine highcharts

1 Answers