chartjs-plugin-gradient
v0.6.1
Published
Easy gradient colors for Chart.js
Downloads
28,378
Maintainers
Readme
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
Installation
NPM:
npm i --save-dev chartjs-plugin-gradient
CDN:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-gradient"></script>
Usage
loading
ESM
import gradient from 'chartjs-plugin-gradient';
CDN
const gradient = window['chartjs-plugin-gradient'];
Registering
All charts
Chart.register(gradient);
Signle chart
const chart = new Chart(ctx, {
// ...
plugins: {
gradient
}
});
Configuration
The gradient colors are configured in the gradient
key of dataset
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.