Update current value on mousemove for all lines in stock highcharts - reactjs

Question

When mouse is moved, I want to update the current value field of datagrid for both the lines. Unfortunately, it is updating for signal line when mouse is hovered over a particular line as you can see here:
DEMO : https://stackblitz.com/edit/react-ts-7d79lt?file=stockchart%2Fstockchart.js
I kind of know it is because I'm attaching mouseOver callback to point property of plotOptions
plotOptions: {
series: {
// compare: 'percent',
showInNavigator: true,
dataGrouping: {
enabled: false,
},
point: {
events: {
mouseOver: (e) => {
const temp = [...stockGrid];
const stock = temp.find((x) => x.name === e.target.series.name);
if (stock) {
stock.currentValue = e.target.options.y;
setStockGrid(temp);
}
},
},
},
},
},
I tried attaching mouseOver to series also but I don't know how to extract right value with it.
I want to update both lines' current value simultaneously when mouse is moving anywhere in the chart.
2) If you look at the tooltip, I want to get rid of the outer rectangle from all tooltips. I tried setting tooltip.borderWidth to 0 , This removes the outer rectangle but it also removes tooltip connection line to vertical line. I need a line between vertical line (from line point to tooltip) and tooltip.

Answer 1

1) You can iterate through all chart series and check if any of points has the same x value as hovered one.
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
let hoveredPoint = this,
text = '';
hoveredPoint.series.chart.series.forEach(series => {
if (hoveredPoint.series.name != series.name) {
series.points.forEach(point => {
if (hoveredPoint.x === point.x) {
text += point.series.name + ': ' + point.y + ', ' + hoveredPoint.series.name + ': ' + hoveredPoint.y;
console.log(text)
}
})
}
})
},
}
}
},
},
Simplified demo:
https://jsfiddle.net/BlackLabel/75Lkw4qj/
2) Have you considered removing the inner border instead?
Demo:
https://stackblitz.com/edit/react-ts-6asjx2?file=stockchart%2Fstockchart.js