Angular 8 & Highcharts - how to show tooltip crosshairs - highcharts

Question

I've installed highcharts for angular in my code and followed the hello world example
I'd like to add the crosshairs tooltip in my chart as in this example (the vertical line), so I modified the demo example options as follows:
chartOptions: Highcharts.Options = {
series: [{
data: [1, 2, 3],
type: 'line'
},
{
data: [3, 1, 2],
type: 'line'
}],
tooltip: {
crosshairs: true,
shared: true
}
};
but I get the following error from the linter:
Type '{ crosshairs: boolean; shared: true; }' is not assignable to type 'TooltipOptions'.
Object literal may only specify known properties, and 'crosshairs' does not exist in type 'TooltipOptions'.ts(2322)
highcharts.d.ts(14729, 5): The expected type comes from property 'tooltip' which is declared here on type 'Options'
Any suggestion?

Answer 1

tooltip.crosshairs option is deprecated. Instead use xAxis.crosshair and/or yAxis.crosshair:
chartOptions: Highcharts.Options = {
series: [{
data: [1, 2, 3],
type: 'line'
}, {
data: [3, 1, 2],
type: 'line'
}],
xAxis: {
crosshair: true
},
yAxis: {
crosshair: true
}
};
Or as a config object:
chartOptions: Highcharts.Options = {
series: [{
data: [1, 2, 3],
type: 'line'
}, {
data: [3, 1, 2],
type: 'line'
}],
xAxis: {
crosshair: {
// options here
color: '#ff0000'
}
},
yAxis: {
crosshair: {
// options here
color: '#ffff00'
}
}
};