chartjs-plugin-gradient


Easy gradients for Chart.js

This plugin requires Chart.js 3.0.0 or later. It should also work with v2, but there are no regressing tests to guarantee this.

NOTE the plugin does not automatically register.

Example

!Example chart

Installation

NPM:

``bash
npm i --save-dev chartjs-plugin-gradient
`

CDN:

`html

`

Usage

$3

ESM

`js
import gradient from 'chartjs-plugin-gradient';
`

CDN

`js
const gradient = window['chartjs-plugin-gradient'];
`

$3

All charts

`js
Chart.register(gradient);
`

Signle chart

`js
const chart = new Chart(ctx, {
// ...
plugins: {
gradient
}
});
`

$3

The gradient colors are configured in the gradient key of dataset

`js
const chart = new Chart(ctx, {
data: {
datasets: [{
// data
gradient: {
backgroundColor: {
axis: 'y',
colors: {
0: 'red',
50: 'yellow',
100: 'green'
}
},
borderColor: {
axis: 'x',
colors: {
0: 'black',
1: 'white',
2: 'black',
3: 'white'
}
}
}
}]
}
});
`

License

chartjs-plugin-gradient.js` is available under the MIT license.