score:10

Accepted answer

Update:
Highcharts has now implemented the OP's feature request. You can now specify the zIndex in the tooltip property. Like:

tooltip: {
    crosshairs: [ {
        width: 1,
        color: 'lime',
        zIndex: 22
        }, {
        width: 1,
        color: 'lime',
        zIndex: 22
    } ]
},



At the time of this question, Highcharts did not give us a way to do that. Not even CSS styles can change the plot order (visibility).
Consider making a feature request. (Update: the FR was made and implemented.)

Meanwhile, you can tweak the Highcharts source (in that example, it is highcharts.com/js/testing.js).

Find this line in the source file:

attribs = {
    'stroke-width': crosshairsOptions[i].width || 1,
    stroke: crosshairsOptions[i].color || '#C0C0C0',
    zIndex: 2
};

and change the zIndex to 20.


Then find this line in the source file:

var group = renderer.g('tooltip')
    .attr({ zIndex: 8 })
    .add(),

and change the zIndex to 22.

score:1

There is a zIndex attribute for crosshairs:

tooltip: {
    crosshairs: [{
        width: 3,
        color: 'green',
        zIndex: 50
    }, {
        width: 3,
        color: 'green',
        zIndex: 50
    }]
},

http://jsfiddle.net/hHjZb/3711/


Related Query

More Query from same tag