Can highcharts crosshairs show on top of area chart fill?

Question

Can the cross-hairs for Highcharts show on top of the area chart instead of being hidden beneath it?
Here's an example of the problem jsfiddle.net/hHjZb/1286/

Answer 1

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.