I have two stacked charts with synchronized tooltips, and this functionality works well. However, there’s an issue: when I hover outside the plotting area (within #draggable-curve div), such as over the range selector, the tooltip prevents me from changing the date.

I tried to addEventListener in highchart by using
document.querySelectorAll("#draggable-curve .highcharts-plot-background");

Where .highcharts-plot-background refering to svg > rect. But might be this is not working becuase we can’t add listener directly(Well i’m not sure).

My code snippet (Can’t put full code, sorry)

const DraggableCurve = () => {
    useEffect(() => {
        ["mousemove", "touchmove", "touchstart"].forEach(function (eventType) {
            document
                .getElementById("draggable-curve")
                .addEventListener(eventType, function (e) {
                    let chart, point, i, event;

                    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                        chart = Highcharts.charts[i];
                        if (chart) {
                            // Find coordinates within the chart
                            event = chart.pointer.normalize(e);
                            // Get the hovered point
                            point = chart.series[0].searchPoint(event, true);

                            if (point) {
                                point.highlight(e);
                            }
                        }
                    }
                });
        });
    }, []);

    return (
        <div className="flex flex-col gap-4" id="draggable-curve">
           <HighchartsReact
                highcharts={Highcharts}
                options={lineChartOptions}
                containerProps={{ id: 'line-12345' }}
            />
            <HighchartsReact
                highcharts={Highcharts}
                options={columnChartOptions}
                containerProps={{ id: 'column-12345' }}
            />
        </div>
    );
}

Expectation:

  useEffect(() => {
        ["mousemove", "touchmove", "touchstart"].forEach(eventType => {
          const plotBackgrounds = document.querySelectorAll("#draggable-curve .highcharts-plot-background");
          plotBackgrounds.forEach(plotBackground => {
            plotBackground.addEventListener(eventType, function (e) {
              let chart, point, i, event;
    
              for (i = 0; i < Highcharts.charts.length; i++) {
                chart = Highcharts.charts[i];
                if (chart) {
                  event = chart.pointer.normalize(e);
                  point = chart.series[0].searchPoint(event, true);
    
                  if (point) {
                    point.highlight(e);
                  }
                }
              }
            });
          });
        });
    }, []);

I want to add events to the .highcharts-plot-background so that the tooltip only becomes visible when the user hovers over the chart plotting area.

Refer chart ploting area which is marked in black box in image.

Can we bind event in .highcharts-plot-background classes of both charts.

Expectation: How can I modify the synchronized tooltip functionality so tooltip only visible when the user hovers over the chart plot area, not outside of it?