Plugins are the most efficient way to customize or change the default behavior of a chart. They have been introduced at version 2.1.0 (opens new window) (global plugins only) and extended at version 2.5.0 (opens new window) (per chart plugins and options).
# Using pluginsPlugins can be shared between chart instances:
Plugins can also be defined directly in the chart plugins
config (a.k.a. inline plugins):
WARNING
inline plugins are not registered. Some plugins require registering, i.e. can't be used inline.
However, this approach is not ideal when the customization needs to apply to many charts.
# Global pluginsPlugins can be registered globally to be applied on all charts (a.k.a. global plugins):
WARNING
inline plugins can't be registered globally.
# Configuration # Plugin IDPlugins must define a unique id in order to be configurable.
This id should follow the npm package name convention (opens new window):
If a plugin is intended to be released publicly, you may want to check the registry (opens new window) to see if there's something by that name already. Note that in this case, the package name should be prefixed by chartjs-plugin-
to appear in Chart.js plugin registry.
Plugin options are located under the options.plugins
config and are scoped by the plugin ID: options.plugins.{plugin-id}
.
To disable a global plugin for a specific chart instance, the plugin options must be set to false
:
To disable all plugins for a specific chart instance, set options.plugins
to false
:
You can set default values for your plugin options in the defaults
entry of your plugin object. In the example below the canvas will always have a lightgreen backgroundColor unless the user overrides this option in options.plugins.custom_canvas_background_color.color
.
Read more about the existing plugin extension hooks.
# Chart InitializationPlugins are notified during the initialization process. These hooks can be used to set up data needed for the plugin to operate.
# Chart UpdatePlugins are notified throughout the update process.
# Scale UpdatePlugins are notified throughout the scale update process.
# RenderingPlugins can interact with the chart throughout the render process. The rendering process is documented in the flowchart below. Each of the green processes is a plugin notification. The red lines indicate how cancelling part of the render process can occur when a plugin returns false
from a hook. Not all hooks are cancelable, however, in general most before*
hooks can be cancelled.
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.
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.
If you want your plugin to be statically typed, you must provide a .d.ts
TypeScript declaration file. Chart.js provides a way to augment built-in types with user-defined ones, by using the concept of "declaration merging".
When adding a plugin, PluginOptionsByType
must contain the declarations for the plugin.
For example, to provide typings for the canvas backgroundColor plugin
, you would add a .d.ts
containing:
Last Updated: 7/12/2025, 4:29:51 PM
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4