Use dispatchEvent to invoke multiple Chartjs line charts tooltips but not worked with large width

### Expected behavior

I had multiple Line Charts in a React project and wanted to have a common vertical Crosshairs and display tooltip in the corresponding position. because the actual situation was more complex, I simplified this part and built a [demo](https://codepen.io/chengs-u/pen/oNdYNoG?editors=1111).

There is NO Crosshair in the demo, but essentially a transparent Div that covers all the charts is placed at the top level and all the `onMouseMove`, `onMouseLeave` and `onMouseEnter` methods are passed to the parent component.

### Current behavior

Here are some of the core code:
```
onMouseMove={(event) => {
handleMoveEventWithAllCanvas(event);
setCrosshairXIndex(event.nativeEvent.offsetX);
}}

function handleMoveEventWithAllCanvas(event) {
refCanvases.current.forEach((canvas,i) => {
// Get the point where the mouse is
let rect = canvas.current.getBoundingClientRect();

let newEvent = new MouseEvent(event.type, {
clientX: rect.left + event.nativeEvent.offsetX,
clientY: rect.top + height/2,
})
canvas.current.dispatchEvent(newEvent);
})
}
```

This method worked well when this chart was relatively small (not quite sure of the exact numbers)! But when the chart is wider, the tooltip will not be triggered on the right side of the chart. I used afterEventhook to check what events the chart was receiving, and I found that y and/or x could become negative numbers.

### Reproducible sample

https://codepen.io/chengs-u/pen/oNdYNoG?editors=1111

### Optional extra steps/info to reproduce

This is the log output from the console:

```
// Tooltips worked
newEvent clientX: 1630 clientY: 345
customEventListener: evt.type: mousemove
customEventListener: clientX: 1630 offsetX: 0 pageX: 1630 X: 407
customEventListener: clientY: 345 offsetY: -49 pageY: 345 Y: 49

// Tooltips stuck from this event
newEvent clientX: 1631 clientY: 345
customEventListener: evt.type: mousemove
customEventListener: clientX: 1631 offsetX: 1 pageX: 1631 X: 1
customEventListener: clientY: 345 offsetY: -49 pageY: 345 Y: -49

```

I've been stuck in this problem for a long time, my Chart is set up in responsive mode according to [this](https://www.chartjs.org/docs/latest/configuration/responsive.html) document, and I've checked the source code of Chartjs for [event handling](https://github.com/chartjs/Chart.js/blob/ebcaff15c2bd8aa74b1d8c1d082aee783f700f1b/src/helpers/helpers.dom.js#L100), but I couldn't find the answer

### Possible solution

I'm not sure if this issue is a bug or a problem with some part of the setup, so I'll set it up as a bug tag for now, thanks!

### Context

_No response_

### chart.js version

v3.9.1

### Browser name and version

_No response_

### Link to your project

_No response_