Fix chart event sync

[adelamarAtGalileo]

Fixes Issue: #95

Context

This issue was caused by a change in github.com/chartjs/Chart.js/pull/9613 where the chart event controller started filtering the events to plugins by the event's native type:

Previously

const eventFilter = (plugin) => (plugin.options.events || this.options.events).includes(e.type);

Now

const eventFilter = (plugin) => (plugin.options.events || this.options.events).includes(e.native.type);

The plugin chartjs-plugin-crosshair syncs events by passing them through the chart's _eventHandler again, yet failed to specify the event's native.type

Fix

The fix was to implement a form of @bolau's suggestion (#95 (comment)) where we preserve the event.type and add the event.native.type

It seems that the fix by @geriatricdan is already contained in the repository code, but at the wrong place:

var newEvent = {
  type: e.original.type == "click" ? "mousemove" : e.original.type,  // do not transmit click events to prevent unwanted changing of synced charts. We do need to transmit a event to stop zooming on synced charts however.
  chart: chart,
  x: xScale.getPixelForValue(e.xValue),
  y: e.original.y,
  native: {
    // INSERTED HERE
    type: e.original.type == "click" ? "mousemove" : e.original.type,  // do not transmit click events to prevent unwanted changing of synced charts. We do need to transmit a event to stop zooming on synced charts however.
    buttons: buttons
  },
  stop: true
};

Testing

I've confirmed that this fix works on Chrome (Version 115.0.5790.170 (Official Build) (x86_64)) with:

"chart.js": "4.3.3",
"chartjs-plugin-crosshair": "2.0.0",
"react-chartjs-2": "5.2.0",

Example

Before	After
Event does not sync	Event does sync

[adelamarAtGalileo]

@nategrift I see you made a change last week, any chance you could review this fix?

[nategrift]

Hey @adelamarAtGalileo! Thanks for fixing this, seems to fix the issue. I am going to merge it into a new version branch v4.0.1 to bundle a bunch of improvements and fixes together. So you should see the issue fixed on npm soon.

Thanks for your contribution! ❤️

[NiTRoeSE]

Can confirm, this works with Chart.js 4+
The only thing i didn't get working is:

If charts have different heights than tooltip is not triggert in every position of the cursor.
Maybe anybody can explain or have a solution for this.

Thanks in advanced !