Custom plugin does not have beforeDestroy call

[elinake]

I have to manually destroy my chart instance by calling this.chart.destroy(); My problem is that I have a custom plugin which has event listeners. When a chart is destroyed, it notifies the plugins, and in the plugin's destroy call I call chart.canvas.removeEventListener(). But this works only for the automatic destroy, and when I call destroy manually, the canvas stops existing before the plugins are notified. As far as I could find, there are no events that are run before destroy, according to the documents stop and uninstall are also called after destroy.

I managed to make a workaround by placing event listener removers to reset, and calling chart.notifyPlugins('reset') before destroying the chart. However, this way the event listener removing is entirely manual, have to be remembered each time the plugin is used in different contexts, and there's no way to ensure the event listeners were removed when chart is destroyed. There has to be a way to do a beforeDestroy call for a custom plugin.

Chart.js version: 3.6.1

[kurkle]

Is there a reason you are handling the listeners manually?

You could just configure the events you need for your plugin and let Chart.js handle the listeners.

For example:

new Chart(canvas, {
  data: ...
  options: {
    // defaults + 'mousedown' (these are all the listeners the chart will register)
    events: ['mousemove', 'mouseout', 'click', 'touchstart', 'touchmove', 'mousedown'],
    plugins: {
       PLUGIN_ID: {
         // only pass mousedown to this plugin
         events: ['mousedown'] 
       }
    }
  },
  plugins: [{
    id: 'PLUGIN_ID',
    beforeEvent(chart, args, opts) {
     console.log(args.event.type, 'before');
    },
    afterEvent(chart, args, opts) {
     console.log(args.event.type, 'after');
    }
}

[elinake]

@kurkle The plugin creates custom element(s) that can be dragged in the chart, and different events happen during and after drag and during and after mouse move that is not a drag, so I'm listening separately for different types of events depending on are element(s) in a dragging state.

[etimberg]

It seems like we could add a plugin hook beforeDestroy rather easily. I'm happy to look at a PR for it