chartjs-plugin-autocolors
Automatic color generation for Chart.js
The generation is based on Janus Troelsen's answer at Stack Overflow.
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:
npm i --save-dev chartjs-plugin-autocolors
CDN:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>
Usage
loading
ESM
import autocolors from 'chartjs-plugin-autocolors';
CDN
const autocolors = window['chartjs-plugin-autocolors'];
Registering
All charts
Chart.register(autocolors);
Single chart
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
const chart = new Chart(ctx, {
// ...
options: {
plugins: {
autocolors: {
enabled: false
}
}
}
});
Mode
There are two modes, 'dataset'
(default) and 'data'
- 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.
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.
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)
};
}
}
}
}
});
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.