diff --git a/docs/developers/destroy_flowchart.png b/docs/developers/destroy_flowchart.png new file mode 100644 index 00000000000..c8d5cbab51e Binary files /dev/null and b/docs/developers/destroy_flowchart.png differ diff --git a/docs/developers/plugins.md b/docs/developers/plugins.md index 64efe2096ba..4ee9e5ba517 100644 --- a/docs/developers/plugins.md +++ b/docs/developers/plugins.md @@ -147,3 +147,11 @@ Plugins can interact with the chart throughout the render process. The rendering Plugins can interact with the chart during the event handling process. The event handling flow is documented in the flowchart below. Each of the green processes is a plugin notification. If a plugin makes changes that require a re-render, the plugin can set `args.changed` to `true` to indicate that a render is needed. The built-in tooltip plugin uses this method to indicate when the tooltip has changed. ![Chart.js event handling flowchart](./event_flowchart.png) + + +### Chart destroy + +Plugins are notified during the destroy process. These hooks can be used to destroy things that the plugin made and used during its life. +The `destroy` hook has been deprecated since Chart.js version 3.7.0, use the `afterDestroy` hook instead. + +![Chart.js destroy flowchart](./destroy_flowchart.png) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index 72b88482d15..932e5c00135 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -906,6 +906,7 @@ class Chart { } this.notifyPlugins('destroy'); + this.notifyPlugins('afterDestroy'); delete instances[this.id]; } diff --git a/src/core/core.plugins.js b/src/core/core.plugins.js index 480f4239133..27a07bb0c91 100644 --- a/src/core/core.plugins.js +++ b/src/core/core.plugins.js @@ -41,7 +41,7 @@ export default class PluginService { const descriptors = filter ? this._descriptors(chart).filter(filter) : this._descriptors(chart); const result = this._notify(descriptors, chart, hook, args); - if (hook === 'destroy') { + if (hook === 'afterDestroy') { this._notify(descriptors, chart, 'stop'); this._notify(this._init, chart, 'uninstall'); } diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts index f50821f1f92..4cb27f3aab1 100644 --- a/types/index.esm.d.ts +++ b/types/index.esm.d.ts @@ -1065,8 +1065,16 @@ export interface Plugin exte * @param {Chart} chart - The chart instance. * @param {object} args - The call arguments. * @param {object} options - The plugin options. + * @deprecated since version 3.7.0 in favour of afterDestroy */ destroy?(chart: Chart, args: EmptyObject, options: O): void; + /** + * Called after the chart has been destroyed. + * @param {Chart} chart - The chart instance. + * @param {object} args - The call arguments. + * @param {object} options - The plugin options. + */ + afterDestroy?(chart: Chart, args: EmptyObject, options: O): void; /** * Called after chart is destroyed on all plugins that were installed for that chart. This hook is also invoked for disabled plugins (options === false). * @param {Chart} chart - The chart instance.