[Solved] How to modify hover sensitivity in a multiseries scatterLine chart when two series are close to each other or the lines overlap at some point?

[Kenia]

I have a multiseries scatterLine chart built in js that also has multiple yaxis shown one at a time as you hover on the series.

Sometimes series can be close to each other and therefore when zooming in or scrolling left and right in a blank space of the chart, the hover event fires taking another series (not necessarily the closest one to mouse position) and therefore changing the one being showcased and restarting zoom, this is my hover event:

        function onHoverScatter(e) {
            if (lockedAxisSeries && lockedAxisSeries !== e.series.yAxis) return;
            if (hoverLock && currentHoverAxis !== e.series.yAxis) return;

            let chart = e.sender;
            var hoveredSeriesIndex = e.series.index;

            let series = chart.options.series;
            let yAxis = chart.options.yAxis;
            hoverLock = true;
            if (currentHoverAxis === hoveredSeriesIndex) return;
            currentHoverAxis = hoveredSeriesIndex;

            for (let i = 0; i < series.length; i++) {
                if (i === hoveredSeriesIndex) {
                    series[i].opacity = 1;
                } else {
                    series[i].opacity = 0.2;
                }
            }

            if (!Array.isArray(yAxis)) yAxis = [yAxis];
            yAxis[hoveredSeriesIndex].plotBands[0].opacity = 0.5;
            yAxis[hoveredSeriesIndex].visible = true;

            yAxis.forEach(function (axis, i) {
                if (i !== hoveredSeriesIndex) {
                    axis.visible = false;
                    axis.plotBands[0].opacity = 0.0;
                }
            });

            chart.options.series.forEach(function (s) {
                if (!s.markers) s.markers = {};
                s.markers.size = 6;
            });

            chart.setOptions({
                series: series,
                yAxis: yAxis,
                xAxis: {
                    min: null,
                    max: null
                }
            });
        }               

 

this is how the series look:

 

this is an example of the hover event firing for a marker much further away than the intended one:

(the blue circle represents where the mouse was positioned)