chartjs-plugin-autocolors

Chart.js plugin that automatically assigns a color to each dataset, data point, or label — no more picking colors by hand or reusing the same few colors across every chart, for anyone already charting with Chart.js.

Example

Installation

npm install chart.js chartjs-plugin-autocolors

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-autocolors"></script>

Quickstart

import { Chart, registerables } from 'chart.js';
import autocolors from 'chartjs-plugin-autocolors';

Chart.register(...registerables, autocolors);

new Chart(document.getElementById('chart'), {
  type: 'bar',
  data: {
    labels: ['Q1', 'Q2', 'Q3', 'Q4'],
    datasets: [
      { label: 'Dataset 1', data: [12, 19, 8, 15] },
      { label: 'Dataset 2', data: [6, 11, 14, 9] },
    ],
  },
});

See more integration options (script tag, other module loaders) in the documentation.

Documentation

You can find documentation for chartjs-plugin-autocolors at https://chartjs-plugin-autocolors.pages.dev/. Modes, customization, offset, repeat, and browser compatibility are all covered there, not in this README — this file stays a quickstart.

Development

You first need to install node dependencies (requires Node.js):

> npm install

The following commands will then be available from the repository root:

> npm run build        // build dist files
> npm run autobuild     // build and watch for changes
> npm test              // run all tests
> npm run lint          // perform code linting

License

chartjs-plugin-autocolors is available under the MIT license.