What is implemented is, as soon as I move the mouse, it should update the current value (for all series (lines) - remember I can have up to 30 series in one go) in the grid shown right below stock chart. It is working expected.
Pls find working demo : https://stackblitz.com/edit/react-ts-q ... ptions.js FYI: You can focus on only mouseOver function rather than looking in to all other files as demo has so many files.
Problem 1
If you select 30 Days from the dropdown and start moving your mouse slowly, it updates the grid current value column for all series(lines) rightly.
But the problem is when I zoom-in (either by drag select mouse from one place to somewhere else in chart or by dragging two yellow handler towards each other ), it doesn't update the current value column
NOTE: These below two images are for your reference only to understand what I mean by No zoomed-in and zoomed-in
Without Zoom-in Image
With Zoom-in Image - Try to bring both yellow handlers together
FYI, if you select 7 Days and if you perform zoom-in, it works very well but for 30 Days with zoom-in scenario, it doesn't work. I need help to fix it.
Problem 2
As I told you I can have up to 30 series (lines) in one go. In given demo, there are two series(lines) and when you select 30 days, you have to move your mouse slowly, otherwise it will not update the value immediately. That is because on each mouse move, I'm looping through all lines multiple times and perform some logic. I know it is a bit complex logic as I use one/two for loops as shown in below code snippet. It runs every time when mouse is moved for each hovered point for all lines. This is very bad way of updating the current value BUT I want to improve this logic. I know this is not right implementation but I really have NO IDEA how to optimize it. Any help would be greatly appreciated.
Code: Select all
mouseOver: (e) => {
const index = e.target.index;
const chart = e.target.series.chart;
const series = chart.yAxis[0].series;
const totalGridSeries = [...stockGrid];
for (let i = 0; i < series.length; i++) {
const name = series[i].name || series[i].name;
const foundSeries = totalGridSeries.find(
(x) => x.name === name
);
if (foundSeries) {
if (index) {
const value = series[i].points[index]?.y;
if (value) {
foundSeries.currentValue = value;
} else {
foundSeries.currentValue = undefined;
}
} else {
foundSeries.currentValue = undefined;
}
}
}
setStockGrid(totalGridSeries);
},