Highcharts: showing tooltip with calculated value at Crosshair - highcharts

Question

I whant to have tooltip at mouseposition, not only at "real" data (so not getting the series data, but the calculated data).
How to do this?
(the real data is different, not a straight line like in the fiddle)
Highcharts.stockChart('container', {
xAxis: {
type: 'datetime',
startOnTick: false,
endOnTick: false,
tickInterval: 360 * 24 * 3600 * 1000,
crosshair: {
snap: true,
},
},
tooltip: {
split: false,
shared: true,
},
legend: {
enabled: true,
layout: 'proximate',
align: 'right',
itemStyle: {
color: '#000000',
fontWeight: 'bold',
fontSize: '10px',
}
},
series: [{
name: 'Line1',
data: [{
x: (new Date("2000-05-12")).getTime(),
y: 0
},
{
x: (new Date("2050-05-12")).getTime(),
y: 100
},
]
},
{
name: 'Line2',
data: [{
x: (new Date("2000-05-12")).getTime(),
y: 100
},
{
x: (new Date("2050-05-12")).getTime(),
y: 0
},
]
}
]
});
https://jsfiddle.net/nowo/09br3g6m/7/

Answer 1

You need to have points that crosshair can refer to like on the example.
To edit the options you want to show, you have the option of using xAxis.labels.formatter.
xAxis: {
crosshair: {
labels: {
enabled: true,
shape: 'rect',
//format:'{value:%d%y}',
backgroundColor: 'rgb(255,0,0)',
formatter: function(value) {
return 'label: ' + value;
}
},
}
},
yAxis: {
opposite: true,
crosshair: {
label: {
enabled: true,
//format: '{value:.2f}',
shape: 'rect',
padding: 2,
formatter: function(number) {
console.log('here is the numer', number);
return 'test ' + number;
}
}
},
labels: {
align: 'left',
format: '{value:.2f}',
y: 6,
x: 2
}
},
Live demo: https://jsfiddle.net/BlackLabel/8cdyh253/1/