chart.js Plugins Plugins Introduction

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Example

Plugins are a way for a developer to modify a chart as it is being created. Chart.js calls all plugins at the following chart states:

  • Start of initialization
  • End of initialization
  • Start of update
  • After the chart scales have calculated
  • Start of datasets update
  • End of datasets update
  • End of update (before render occurs)
  • Start of draw
  • End of draw
  • Before datasets draw
  • After datasets draw
  • Resize
  • Before an animation is started

Creating a plugin

To create a plugin, create a JavaScript object with appropriate named functions for any chart state you wish to modify (listed above). After you have your plugin object, pass it to Chart.pluginService.register(PLUGIN_OBJECT_NAME); to let Chart.js know to register the plugin.

Minimal Plugin Example

// Create the plugin object with functions for all the chart states
var simplePlugin = {
  beforeInit: function(chartInstance) {},
  afterInit: function(chartInstance) {},

  resize: function(chartInstance, newChartSize) {},

  beforeUpdate: function(chartInstance) {},
  afterScaleUpdate: function(chartInstance) {},
  beforeDatasetsUpdate: function(chartInstance) {},
  afterDatasetsUpdate: function(chartInstance) {},
  afterUpdate: function(chartInstance) {},

  // This is called at the start of a render. It is only called once, even if the animation will run for a number of frames. Use beforeDraw or afterDraw
  // to do something on each animation frame
  beforeRender: function(chartInstance) {},

  // Easing is for animation
  beforeDraw: function(chartInstance, easing) {},
  afterDraw: function(chartInstance, easing) {},

  // Before the datasets are drawn but after scales are drawn
  beforeDatasetsDraw: function(chartInstance, easing) {},
  afterDatasetsDraw: function(chartInstance, easing) {},

  destroy: function(chartInstance) {}
};

// Let Chart.js know about the new plugin
Chart.pluginService.register(simplePlugin);

Currently this minimal plugin does not do anything. To make this plugin useful one would need to add code to the functions that modifies the chart.



Got any chart.js Question?