What is the order in which the hooks (plugins) of Chart.js are executed?

Question

The documentation of chartJS plugins is available here, however it is incomplete as there is no full description of each of the hooks:

• afterInit
• beforeUpdate (cancellable)
• afterUpdate
• beforeLayout (cancellable)
• afterLayout
• beforeDatasetsUpdate (cancellable)
• afterDatasetsUpdate
• beforeDatasetUpdate (cancellable)
• afterDatasetUpdate
• beforeRender (cancellable)
• afterRender
• beforeDraw (cancellable)
• afterDraw
• beforeDatasetsDraw (cancellable)
• afterDatasetsDraw
• beforeDatasetDraw (cancellable)
• afterDatasetDraw
• beforeEvent (cancellable)
• afterEvent
• resize
• destroy

This list can be summarize to the following functions, yet the order is not clear for me:

• Update
• Layout
• DatasetsUpdate
• DatasetUpdate
• Render
• Draw
• DatasetsDraw
• DatasetDraw
• Event
• resize
• destroy

Some of the names might know what is the order of execution of the hooks.

---

Use case

I want to implement several behaviours on the charts that activate on certain conditions on the data, as an example, I want to update the legend labels when there is no data available, so, instead of displaying the name of the category in the legend, it would display a message saying no data.

To be sure, I have manage to implement plugins, but since the order is not clear for me, I keep getting things mixed up due to the order.

Panicle

Not quite the order, but I found the internal documentation of each of the hooks in the code. Still the order is not clear. – Panicle

Answer 1

I found the internal documentation of each of the hooks in the code (see Below for a prettified version). Not quite the order, but it can help figuring it out.

Note that some hooks have the same name but they differ in the parameters (you can check those directly in the code:

• beforeInit: Called before initializing chart.
• afterInit: Called after chart has been initialized and before the first update.
• beforeUpdate: Called before updating chart. If any plugin returns false, the update is cancelled (and thus subsequent render(s)) until another update is triggered.
• afterUpdate: Called after chart has been updated and before rendering. Note that this hook will not be called if the chart update has been previously cancelled.
• beforeDatasetsUpdate: Called before updating the chart datasets. If any plugin returns false, the datasets update is cancelled until another update is triggered. @since version 2.1.5
• afterDatasetsUpdate: Called after the chart datasets have been updated. Note that this hook will not be called if the datasets update has been previously cancelled.
• beforeDatasetUpdate: Called before updating the chart dataset at the given args.index. If any plugin returns false, the datasets update is cancelled until another update is triggered.
• afterDatasetUpdate: Called after the chart datasets at the given args.index has been updated. Note that this hook will not be called if the datasets update has been previously cancelled.
• beforeLayout: Called before laying out chart. If any plugin returns false, the layout update is cancelled until another update is triggered.
• afterLayout: Called after the chart has been layed out. Note that this hook will not be called if the layout update has been previously cancelled.
• beforeRender: Called before rendering chart. If any plugin returns false, the rendering is cancelled until another render is triggered.
• afterRender: Called after the chart has been fully rendered (and animation completed). Note that this hook will not be called if the rendering has been previously cancelled.
• beforeDraw: Called before drawing chart at every animation frame specified by the given easing value. If any plugin returns false, the frame drawing is cancelled until another render is triggered.
• afterDraw: Called after the chart has been drawn for the specific easing value. Note that this hook will not be called if the drawing has been previously cancelled.
• beforeDatasetsDraw: Called before drawing the chart datasets. If any plugin returns false, the datasets drawing is cancelled until another render is triggered.
• afterDatasetsDraw: Called after the chart datasets have been drawn. Note that this hook will not be called if the datasets drawing has been previously cancelled.
• beforeDatasetDraw: Called before drawing the chart dataset at the given args.index (datasets are drawn in the reverse order). If any plugin returns false, the datasets drawing is cancelled until another render is triggered.
• afterDatasetDraw: Called after the chart datasets at the given args.index have been drawn (datasets are drawn in the reverse order). Note that this hook will not be called if the datasets drawing has been previously cancelled.
• beforeTooltipDraw: Called before drawing the tooltip. If any plugin returns false, the tooltip drawing is cancelled until another render is triggered.
• afterTooltipDraw: Called after drawing the tooltip. Note that this hook will not be called if the tooltip drawing has been previously cancelled.
• beforeEvent: Called before processing the specified event. If any plugin returns false, the event will be discarded.
• afterEvent: Called after the event has been consumed. Note that this hook will not be called if the event has been previously discarded.
• resize: Called after the chart as been resized.
• destroy: Called after the chart as been destroyed.

Panicle

Answer 2

old question but in chart.js 4.4.0, you can get a sense of order by stepping through Chart class (https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js) which works out to:

1. beforeUpdate
2. BeforeElementsUpdate
3. beforeLayout
4. afterLayout
5. reset(if animations disabled)
6. beforeDatasetsUpdate
7. beforeDatasetUpdate
8. afterDatasetUpdate
9. afterDatasetsUpdate
10. afterUpdate
11. beforeRender
12. beforeDraw
13. beforeDatasetsDraw
14. beforeDatasetDraw
15. afterDatasetDraw
16. afterDatasetsDraw
17. afterDraw
18. afterRender

before/afterInit and before/afterEvent hooks will happen before the above and before/afterDestroy happens on its own.

Nashner