You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Chart.js](http://www.chartjs.org/) 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.
6
8
7
9
Requires [Chart.js](https://github.com/chartjs/Chart.js/releases)**2.6.0** or later.
8
10
9
-
## Usage
11
+
## Documentation
10
12
11
-
You can download the latest version of [chartjs-plugin-deferred on GitHub](https://github.com/chartjs/chartjs-plugin-deferred/releases/latest)
To configure this plugin, you can simply add the following entries to your chart options:
16
-
17
-
| Name | Type | Default | Description |
18
-
| ---- | ---- | ------- | ----------- |
19
-
| `plugins.deferred` | `Object/Boolean` | `true` | The deferred options (see `plugins.deferred.*` options). Also accepts a boolean, in which case if `true`, the chart will be deferred using the **global options**, else if `false`, the chart will not be deferred.
20
-
| `plugins.deferred.xOffset` | `Number/String` | `0` | Number of pixels (or percent of the canvas width) from which the chart is considered inside the viewport.
21
-
| `plugins.deferred.yOffset` | `Number/String` | `0` | Number of pixels (or percent of the canvas height) from which the chart is considered inside the viewport.
22
-
| `plugins.deferred.delay` | `Number` | `0` | Number of milliseconds to delay the loading after the chart is considered inside the viewport.
23
-
24
-
> **Global options** can be change through `Chart.defaults.global.plugins.deferred`, which by default defer the chart loading until the first line of pixels of the canvas appears in the viewport.
25
-
26
-
For example:
27
-
28
-
```
29
-
{
18
+
```javascript
19
+
newChart(ctx, {
20
+
// ... data ...
21
+
options: {
22
+
// ... other options ...
30
23
plugins: {
31
-
deferred: { // enabled by default
32
-
xOffset: 150, // defer until 150px of the canvas width are inside the viewport
33
-
yOffset: '50%', // defer until 50% of the canvas height are inside the viewport
34
-
delay: 500 // delay of 500 ms after the canvas is considered inside the viewport
35
-
}
24
+
deferred: {
25
+
xOffset:150, // defer until 150px of the canvas width are inside the viewport
26
+
yOffset:'50%', // defer until 50% of the canvas height are inside the viewport
27
+
delay:500// delay of 500 ms after the canvas is considered inside the viewport
28
+
}
36
29
}
37
-
}
30
+
}
31
+
});
38
32
```
39
33
40
34
## Development
41
35
42
36
You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):
43
37
44
-
```shell
45
-
> npm install
46
-
```
38
+
> npm install
47
39
48
40
The following commands will then be available from the repository root:
49
41
50
-
```shell
51
-
> gulp build // build dist files
52
-
> gulp build --watch // build and watch for changes
53
-
> gulp lint // perform code linting
54
-
> gulp package // create an archive with dist files and samples
55
-
```
42
+
> gulp build // build dist files
43
+
> gulp build --watch // build and watch for changes
[Chart.js](http://www.chartjs.org/) 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.
4
+
5
+
**Important:** requires [Chart.js](https://github.com/chartjs/Chart.js/releases)**2.6.0** or later.
6
+
7
+
## Table of Contents
8
+
9
+
{% include "SUMMARY.md" %}
10
+
11
+
## Example
12
+
13
+
```javascript
14
+
newChart(ctx, {
15
+
// ... data ...
16
+
options: {
17
+
// ... other options ...
18
+
plugins: {
19
+
deferred: {
20
+
xOffset:150, // defer until 150px of the canvas width are inside the viewport
21
+
yOffset:'50%', // defer until 50% of the canvas height are inside the viewport
22
+
delay:500// delay of 500 ms after the canvas is considered inside the viewport
23
+
}
24
+
}
25
+
}
26
+
});
27
+
```
28
+
29
+
## License
30
+
31
+
`chartjs-plugin-deferred` is available under the [MIT license](https://github.com/chartjs/chartjs-plugin-deferred/blob/master/LICENSE.md).
By default, `https://cdn.jsdelivr.net/npm/chartjs-plugin-deferred` returns the latest (minified) version, however it's [**highly recommended**](https://www.jsdelivr.com/features) to always specify a version in order to avoid breaking changes. This can be achieved by appending `@{version}` to the url:
You can download the latest version of `chartjs-plugin-deferred` from the [GitHub releases](https://github.com/chartjs/chartjs-plugin-deferred/releases/latest):
31
+
32
+
-`chartjs-plugin-deferred.js` (recommended for development)
33
+
-`chartjs-plugin-deferred.min.js` (recommended for production)
34
+
-`chartjs-plugin-deferred.zip` (contains `.js` and `.min.js` versions + samples)
0 commit comments