Package Exports

chartjs-plugin-autocolors

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chartjs-plugin-autocolors) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

chartjs-plugin-autocolors

Automatic color generation for Chart.js

The generation os based Janus Trielsen'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.

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);

Signle 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'
            }
        }
    }
});

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.