I am trying to present the events of several episodes on a timeline using the column chart in Highstock.
I want to completely disable the crosshair that appears when you move the mouse around the chart. The documentation clearly states that the crosshairs are disabled by simply setting tooltip.crosshairsto false. However, after that the crosshair still appears above the navigation part of the chart.

jsFiddle: jsFiddle shows the problem
Highcharts.stockChart Configuration:
chart = new Highcharts.StockChart({
chart: {
alignTicks: true,
animation: true,
backgroundColor: '#fff',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1398859200000, 1414753200000);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: [
'#89f1a4',
'#68d9f7',
'#9eb9ef',
'#c49eef'
],
credits: {
enabled: false
},
legend: {
align: 'center',
borderWidth: 0,
enabled: true,
navigation: {
animation: true
},
shadow: false,
verticalAlign: 'top'
},
rangeSelector: {
enabled: false
},
scrollbar: {
enabled: false
},
title: {
text: ''
},
tooltip: {
crosshairs: false,
shared: true
},
navigator: {
height: 40,
margin: 10,
maskFill: 'rgba(233, 233, 233, 0.7)',
outlineWidth: 0,
series: {
type: 'column',
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [[
'week',
[1]
]]
}
}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [[
'week',
[1]
]]
}
}
},
yAxis: {
gridLineWidth: 0,
labels: {
enabled: false
},
max: 24,
min: 0,
ordinal: false
},
xAxis: {
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%b %Y',
month: '%b %Y',
year: '%Y'
},
labels: {
style: {
color: '#ccc'
}
},
minRange: 604800000,
ordinal: false
},
series: data
});
My question is:
I was unable to find the crosshairs option anywhere in the Navigator configuration in the API documentation. Am I missing something, or is this a mistake?
Any help is much appreciated!