Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kurkle/chartjs-plugin-autocolors
Automatic color generation for Chart.js
https://github.com/kurkle/chartjs-plugin-autocolors
automatic chart colors plugin
Last synced: 11 days ago
JSON representation
Automatic color generation for Chart.js
- Host: GitHub
- URL: https://github.com/kurkle/chartjs-plugin-autocolors
- Owner: kurkle
- License: mit
- Created: 2020-06-09T04:03:53.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-14T03:32:14.000Z (29 days ago)
- Last Synced: 2024-10-20T17:05:01.996Z (23 days ago)
- Topics: automatic, chart, colors, plugin
- Language: JavaScript
- Homepage:
- Size: 665 KB
- Stars: 64
- Watchers: 3
- Forks: 9
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - autocolors
README
# chartjs-plugin-autocolors
*Automatic color generation for [Chart.js](https://www.chartjs.org)*
The generation is based on Janus Troelsen's answer at [Stack Overflow](https://stackoverflow.com/a/13781114/10359775).
This plugin requires Chart.js 3.0.0 or later. Could work with v2, but it is not supported.
**NOTE** the plugin does not automatically register.
## Example
## Installation
NPM:
```bash
npm i --save chartjs-plugin-autocolors
```
CDN:
```html
```
## Usage
### loading
ESM
```js
import autocolors from 'chartjs-plugin-autocolors';
```
CDN
```js
const autocolors = window['chartjs-plugin-autocolors'];
```
### Registering
All charts
```js
Chart.register(autocolors);
```
Single chart
```js
const chart = new Chart(ctx, {
// ...
plugins: [
autocolors
]
});
```
### Disabling (when registered for all charts)
If registered globally, it might be desirable to disable the autocolors for some charts
```js
const chart = new Chart(ctx, {
// ...
options: {
plugins: {
autocolors: {
enabled: false
}
}
}
});
```
### Mode
**NOTE:** `'dataset'` mode does not work properly for **Pie / Doughnut** charts, so using `'data'` mode with those charts is advised.
There are two modes, `'dataset'` (default) `'data'` and `'label'`
- In `'dataset'` mode, a new color is picked for each dataset.
- In `'data'` mode, an array of colors, equivalent to the length of data is provided for each dataset.
- In `'label'` mode, color is picked for each different dataset label.
```js
const chart = new Chart(ctx, {
// ...
options: {
plugins: {
autocolors: {
mode: 'data'
}
}
}
});
```
### Customize
A `customize` function can be provided to customize the generated colors.
The function is expected to return object containing `background` and `border` properties,
with values acceptable as colors by Chart.js.
```js
const lighten = (color, value) => Chart.helpers.color(color).lighten(value).rgbString();
const chart = new Chart(ctx, {
// ...
options: {
plugins: {
autocolors: {
customize(context) {
const colors = context.colors;
return {
background: lighten(colors.background, 0.5),
border: lighten(colors.border, 0.5)
};
}
}
}
}
});
```
### Offset
`offset` option can be used to offset the color generation by a number of colors.
```js
const chart = new Chart(ctx, {
// ...
options: {
plugins: {
autocolors: {
offset: 5
}
}
}
});
```
### Repeat
Sometimes you might need to color multiple adjacent datasets with same color. The `repeat` option is for that use case.
```js
const chart = new Chart(ctx, {
// ...
options: {
plugins: {
autocolors: {
repeat: 2
}
}
}
});
```
## Browser compatibility
This plugin uses a generator function, so it is not compatible with Internet Explorer.
## License
`chartjs-plugin-autocolors.js` is available under the [MIT license](https://github.com/kurkle/chartjs-plugin-autocolors/blob/main/LICENSE).