[Chartjs]-ChartJS zoom/pan onPan event not firing in React useEffect hook

1👍

The issue has been resolved.

When a chart is initialized, HammerJS is initialized and adds listeners for panning/zooming to the canvas. The issue happens when the chart is initialized with a configuration before the configuration is created (setting the configuration to an empty state), and when the real configuration is updated (with the zoom/pan plugin), the state of enabled in the pan object is not updated correctly, so panning becomes disabled.

The solution is to wait to display the chart React Element until the configuration is available to populate it.

This issue was really happening because the configuration was being set in a useEffect hook, making it available in a later event loop tick than the actual JSX element was being created in.

0👍

When you use useEffect(()=>{},[xxx]) hooks with [xxx] as the second parameter, you should know that only when xxx has changed it will run the function. In your case, I didn’t see any "applicableChannels" in your code, so it’s hard to know where the problem is.

Leave a comment