Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add documentation on how plugin hooks interact with the chart #8634

Merged
merged 2 commits into from
Mar 14, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/docs/developers/plugin_flowcharts.drawio
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<mxfile host="app.diagrams.net" modified="2021-03-14T02:13:51.799Z" agent="5.0 (Windows)" etag="MhdoO5B3fqm3WUufCaS0" version="14.4.8" type="device" pages="3"><diagram id="GnJziOrIlQhF6Q0E3uKP" name="Chart render">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</diagram><diagram id="qz6xZkkN5_TWD1aOfnxG" name="Chart Init">7Zhbc5pAFMc/jY/JILfgY7w1bU0n1U4SnzKLHGAjsnRZvH36LrAIBG+xVWOmMz6wZ+//c36cIzWlNZl/oShw74kFXk2WrHlNaddkua7Kci3+SdYitdzoSmpwKLbEoNwwwEsQRklYI2xBWBrICPEYDsrGEfF9GLGSDVFKZuVhNvHKuwbIgYphMEJe1fqELeamVkOTcvsdYMfNdq5LomeCssHCELrIIrOCSenUlBYlhKVPk3kLvFi8TJdHeq+/Pv5uah2r8+vb83T8Yjau0sW675myugIFnx28dFN+GuDmy/feGGyzjZzx9KGfLR2yRaYXWFw+0SSUucQhPvI6ubVJSeRbEK8q8VY+pkdIwI11bnwFxhYiFlDECDe5bOKJXphj9hxPv9ZEa1joac/FykljkTV8RheFSXFzWOzLpyWtbF56v/hSb8Jhh5aZMCSiIzF1RtzGgDZd0B6e7trd17DRWwrNJYaoA2yL0HnAcNKATIAfks+j4CGGp+XDIRHyzmpc7lb+IDy73svbDjlFXiR2armIspg6CohxX1aiwPM4oLG3Zy5mMAhQosKMvyPKvkRhkFJr43kcE0LwKVAG8wMkr0okVlEMcQvxHsqonBWgFia3wHNm+xtNw+Uwsn9OdbPboYP+cKBd9YPLIecfErA5svcgQD4RAdsOWSDgB2HYjg9ggk0ofPUxq3g091d9Nwk29rwW8QhN5iqWBoalcnvIKBlDoceQTUXXj4mKXkalvoaVla0Ii3osWJRzwlIvoJKD82HTzGZ4ypCtFfpUkK3dXK1ANuSV3zrP95DJy8xyIvGw4/PnERcMOCnNmAvM67hb0THBlpUGBoR4icxkvVj7gGCfJXfRmjWtvQ0sUWSKyXlpV/TT5gDeCNyVdK2XiBNK7C27WPkhvklhCLHtEFjFL6sDHO4qfc378FIS2qUzqu2KJe2Q6LmlFC0KAwQV1eAS+6hyOUko0pu/D+8bzx/SExwzlLfJXgjlPoQB8cNEum41qbtkYkbh7oR+ukr2zKXszX/y9yZ/c9Y9nPzTZOcqJ6sSOMmo8FnKX/UtX8a5y9/GpQB2bFC0PUExzgmKthkUZPPa9DP/VVy1z8aKUVE/1hujeGIUWIhV31Mf/2OVqh4txfNm/gk6ranyD/lK5w8=</diagram><diagram id="6Hx3QUBt-kPyE_5nGTOz" name="Chart update">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</diagram></mxfile>
19 changes: 19 additions & 0 deletions docs/docs/developers/plugins.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
title: Plugins
---
import useBaseUrl from '@docusaurus/useBaseUrl';

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](https://github.com/chartjs/Chart.js/releases/tag/2.1.0) (global plugins only) and extended at [version 2.5.0](https://github.com/chartjs/Chart.js/releases/tag/v2.5.0) (per chart plugins and options).

Expand Down Expand Up @@ -119,3 +120,21 @@ var chart = new Chart(ctx, {
## Plugin Core API

Read more about the [existing plugin extension hooks](https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L733).

### Chart Initialization

Plugins are notified during the initialization process. These hooks can be used to setup data needed for the plugin to operate.

<img alt="Chart.js init flowchart" src={useBaseUrl('img/init_flowchart.png')} />

### Chart Update

Plugins are notified during throughout the update process.

<img alt="Chart.js update flowchart" src={useBaseUrl('img/update_flowchart.png')} />

### Rendering

Plugins 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.

<img alt="Chart.js render pipeline flowchart" src={useBaseUrl('img/render_flowchart.png')} />
Binary file added docs/static/img/init_flowchart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/render_flowchart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/static/img/update_flowchart.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.