Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kurkle/chartjs-plugin-gradient
Easy gradients for Chart.js
https://github.com/kurkle/chartjs-plugin-gradient
Last synced: 3 months ago
JSON representation
Easy gradients for Chart.js
- Host: GitHub
- URL: https://github.com/kurkle/chartjs-plugin-gradient
- Owner: kurkle
- License: mit
- Created: 2020-06-10T19:14:28.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-16T18:23:36.000Z (over 1 year ago)
- Last Synced: 2024-05-01T15:38:31.312Z (9 months ago)
- Language: JavaScript
- Size: 2.39 MB
- Stars: 31
- Watchers: 3
- Forks: 6
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - gradient
README
# chartjs-plugin-gradient
[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=kurkle_chartjs-plugin-gradient&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=kurkle_chartjs-plugin-gradient)
*Easy gradients for [Chart.js](https://www.chartjs.org)*
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](https://github.com/kurkle/chartjs-plugin-gradient/raw/main/sample.png "Example chart")
## Installation
NPM:
```bash
npm i --save-dev chartjs-plugin-gradient
```CDN:
```html
```
## Usage
### loading
ESM
```js
import gradient from 'chartjs-plugin-gradient';
```CDN
```js
const gradient = window['chartjs-plugin-gradient'];
```### Registering
All charts
```js
Chart.register(gradient);
```Signle chart
```js
const chart = new Chart(ctx, {
// ...
plugins: {
gradient
}
});
```### Configuration
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](https://github.com/kurkle/chartjs-plugin-gradient/blob/main/LICENSE).