Highcharts - Small column not clickable when covered with a (sp)line serie - highcharts

Question

We are using Highcharts to display data in column series combined with some spline series. All columns are clickable (to perform a drilldown) but some columns become unclickable because they are somewhat small and are entirely covered by the mouse tracking layer of the spline series.
It can be solved partially by disabling the mouse tracking in the spline series, but then the tooltip is not available for that series, and we need that.
What we need is that the column should be clickable through the mouse tracking layer of the spline series.
I've put an example on JS-fiddle to demonstrate the issue.
events: {
click: function ()
{
alert('I\'m Jane');
}
}
In this example, all 'Jane' columns are clickable, except for the second one (oranges) because it's too small and get's covered by the invisible mouseTracking layer of the spline series
Any suggestions?

Answer 1

As you mentionned, you need to disable the moustracking event for the spline series.
To retrieve all series in the tooltip you can use the following code:
tooltip: {
useHTML: true,
formatter: function () {
var s = '';
s += '<table style="border-style: hidden;border-collapse: collapse;">';
//get the chart object
var chart = this.points[0].series.chart;
//get the categories array
var categories = chart.xAxis[0].categories;
var index = 0;
//compute the index of corr y value in each data arrays
while (this.x !== categories[index]) { index++; }
//loop through series array
$.each(chart.series, function (i, series) {
s += '<tr><td style="color:' + series.color + '">' + series.name + ':</td>';
s += '<td style="text-align:right;color:' + series.color + '">';
s += series.data[index].y.toFixed();
s += '</td></tr>';
});
s += "</table>";
return s;
},
shared: true
}