Highcharts errorbar with corsshairs - highcharts

Question

I try to use a horizontal crosshair as some kind of auxiliary line to compare the upper and lower endpoints of the errorbars.
From a statistical point of view it is some kind of virtual significance test by comparing the confidence intervals.
My problem is that given a column chart I am not able to reach the lower endpoint of the errorbars with the crosshair.
Here is a fiddle (simplified demo from Highcharts).
var chart;
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Temperature vs Rainfall'
},
xAxis: [{
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
yAxis: [{
title: {
text: 'Rainfall',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} mm',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}],
tooltip:{
crosshairs: [false, {color: 'red'}],
formatter: function(){
return false;
}
},
series: [{
name: 'Rainfall',
type: 'column',
yAxis: 0,
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
}, {
name: 'Rainfall error',
type: 'errorbar',
yAxis: 0,
data: [[42, 51], [66, 73], [90, 110], [128, 136], [140, 150], [171, 179], [135, 143], [142, 149], [204, 220], [189, 199], [90, 110], [52, 56]],
}]
});
});
Any suggestions are welcome!

Answer 1

Error bars are paths in SVG, so there's no such thing like lower/higher part of it. If you check highcharts.src.js file and search for drawCrosshair, you will find method responsible for rendering crosshair. As you can see, there is line:
pos = (this.chart.inverted != this.horiz) ? point.plotX : this.len - point.plotY;
Which takes point.plotY to get position of the crosshair. In error bars plotY is top of the point. If you replace point.plotY with point.lowPlot (only for error bars!) then you will render crosshair on the bottom part of the error bar.