Chart.js plugin to defer initial chart updates until the user scrolls and the canvas appears inside the viewport, and thus trigger the initial chart animations when the user is likely to see them.
Requires Chart.js 2.6.0 or later.
new Chart(ctx, {
// ... data ...
options: {
// ... other options ...
plugins: {
deferred: {
xOffset: 150, // defer until 150px of the canvas width are inside the viewport
yOffset: '50%', // defer until 50% of the canvas height are inside the viewport
delay: 500 // delay of 500 ms after the canvas is considered inside the viewport
}
}
}
});You first need to install node dependencies (requires Node.js):
> npm install
The following commands will then be available from the repository root:
> gulp build // build dist files
> gulp build --watch // build and watch for changes
> gulp lint // perform code linting
> gulp docs // generate GitBook documentation (`dist/docs`)
> gulp samples // prepare samples for release (`dist/samples`)
> gulp package // create an archive with dist files and samples
> gulp netlify // prepare Netlify artifacts (`dist/www`)
chartjs-plugin-deferred is available under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent