Easy gradient colors for Chart.js
npm install 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.
NPM:
``bash`
npm i --save-dev chartjs-plugin-gradient
CDN:
`html`
ESM
`js`
import gradient from 'chartjs-plugin-gradient';
CDN
`js`
const gradient = window['chartjs-plugin-gradient'];
All charts
`js`
Chart.register(gradient);
Signle chart
`js`
const chart = new Chart(ctx, {
// ...
plugins: {
gradient
}
});
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'
}
}
}
}]
}
});
chartjs-plugin-gradient.js` is available under the MIT license.