chartjs-plugin-deferred - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #golang #machine-learning #rust #deep-learning #linux #docker #java #cli #kubernetes #vue #open-source

chartjs-plugin-deferred

(★ 113)

Chart.js plugin to defer initial chart updates

File Explorer

Download Latest Version (.zip)

- - ci.yml
  - publish.yml
  - release.yml
- - config.js
- - banner.png
- - getting-started.md
  - migration.md
  - options.md
  - README.md
- - delay.md
  - offset.md
- - defaults.js
  - register.js
  - utils.js
- .eslintrc.js
- attach-gh-assets.js
- create-bower-json.js
- create-packages.js
- create-release-tag.js
- publish-to-npm.js
- utils.js
- plugin.js
- - exports.ts
  - options.basic.ts
  - options.defaults.ts
  - options.undefined.ts
  - tsconfig.json
- .eslintrc.js
- index.d.ts
- options.d.ts
.codeclimate.yml
.eslintignore
.eslintrc.yml
.gitignore
.npmignore
LICENSE.md
package-lock.json
package.json
README.md
rollup.config.js

# Installation Guide

1. Get the code

git clone https://github.com/chartjs/chartjs-plugin-deferred

Downloads the entire project code from GitHub to your computer.

cd chartjs-plugin-deferred

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

> npm install

Downloads and installs the libraries listed in package.json.

> npm run build // build dist files

Builds optimized production files.

> npm run build:dev // build and watch for changes

Builds optimized production files.

> npm run lint // perform code linting

Type this command into your terminal and run it.

> npm run lint -- --fix // automatically fix linting problems

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
  <img src="docs/assets/banner.png"/>
</div>

[![github](https://img.shields.io/github/release/chartjs/chartjs-plugin-deferred.svg?style=flat-square&maxAge=600)](https://github.com/chartjs/chartjs-plugin-deferred/releases/latest) [![travis](https://img.shields.io/travis/chartjs/chartjs-plugin-deferred.svg?style=flat-square&maxAge=600)](https://travis-ci.org/chartjs/chartjs-plugin-deferred) [![codeclimate](https://img.shields.io/codeclimate/maintainability/chartjs/chartjs-plugin-deferred.svg?style=flat-square&maxAge=600)](https://codeclimate.com/github/chartjs/chartjs-plugin-deferred)

[Chart.js](https://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.

Requires [Chart.js](https://github.com/chartjs/Chart.js/releases) **3.x**.

## Documentation

- [Introduction](https://chartjs-plugin-deferred.netlify.app/)
- [Getting Started](https://chartjs-plugin-deferred.netlify.app/getting-started.html)
- [Options](https://chartjs-plugin-deferred.netlify.app/options.html)
- [Samples](https://chartjs-plugin-deferred.netlify.app/samples/)

## Example

```javascript
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
      }
    }
  }
});
```

## Development

You first need to install node dependencies (requires [Node.js](https://nodejs.org/)):

```sh
> npm install
```

The following commands will then be available from the repository root:

```sh
> npm run build             // build dist files
> npm run build:dev         // build and watch for changes
> npm run lint              // perform code linting
> npm run lint -- --fix     // automatically fix linting problems
> npm run docs              // generate documentation (`dist/docs`)
> npm run docs:dev          // generate documentation and watch for changes
> npm run package           // create tgz and zip archives with dist files
```

## License

`chartjs-plugin-deferred` is available under the [MIT license](LICENSE.md).