chartjs-plugin-colorschemes

By default, the plugin does not apply a color scheme if a dataset already has color options specified. If you are using libraries like ng-charts that automatically apply default colors, set override: true to force the plugin's scheme to take precedence.

options: {
    plugins: {
        colorschemes: {
            scheme: 'brewer.Paired12',
            override: true
        }
    }
}

You can install the plugin via npm, bower, or use a CDN. This plugin requires Chart.js 2.5.0 or later.

npm install chartjs-plugin-colorschemes --save

bower install chartjs-plugin-colorschemes --save

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-colorschemes"></script>
<script src="https://unpkg.com/chartjs-plugin-colorschemes"></script>

You can import the entire plugin to use all schemes:

import 'chartjs-plugin-colorschemes';

To reduce bundle size, you can import only the plugin core and specific color schemes individually:

// import the plugin core
import 'chartjs-plugin-colorschemes/src/plugins/plugin.colorschemes';

// import a particular color scheme
import { Aspect6 } from 'chartjs-plugin-colorschemes/src/colorschemes.office';

// ...
    options: {
        plugins: {
            colorschemes: {
                scheme: Aspect6
            }
        }
    }

To use the plugin, import the default export and register it with Chart.js. The plugin attaches a colorschemes object to the Chart constructor, which contains the available color schemes. You can then use these schemes in your chart configurations.

import Chart from 'chart.js';
import ColorSchemesPlugin from 'chartjs-plugin-colorschemes';

// Register the plugin
Chart.register(ColorSchemesPlugin);

// The plugin attaches available schemes to the Chart object
console.log(Chart.colorschemes);

Instead of using a named scheme or the custom function, you can pass an array of color strings directly to the scheme option to define your own colorscheme.

var myColors = ['red', 'green', 'blue', 'orange', 'black', 'yellow'];

// ...
    options: {
        plugins: {
            colorschemes: {
                scheme: myColors
            }
        }
    }

To use a predefined color scheme, specify it within the plugins.colorschemes.scheme option of your Chart.js configuration. You can find available scheme names in the Color Chart.

Note: If the number of datasets exceeds the number of colors in the scheme, colors will repeat. If a dataset has its own color specified, the plugin will not modify it.

options: {
    plugins: {
        colorschemes: {
            scheme: 'brewer.Pailed12'
        }
    }
}

The custom option accepts a function that receives a copy of the current scheme's color array. You can modify this array (e.g., by pushing new colors) and return it to extend the predefined scheme.

var customColorFunction = function(schemeColors) {
    var myColors = ['#ff0000', '#00ff00', '#0000ff']; // define/generate own colors

    // extend the color scheme with own colors
    Array.prototype.push.apply(schemeColors, myColors);

    return schemeColors; // optional: this is not needed if the array is modified in place
};

// ...
    options: {
        plugins: {
            colorschemes: {
                scheme: 'brewer.Paired12',
                custom: customColorFunction
            }
        }
    }

The plugin exports a default object containing several categorized collections of color schemes. You can access these collections to provide color palettes for Chart.js datasets. The available categories are:

• brewer: ColorBrewer schemes.
• office: Microsoft Office-style color schemes.
• tableau: Tableau-style color schemes.

import colorSchemes from 'chartjs-plugin-colorschemes';

// Accessing a specific category
const mySchemes = colorSchemes.brewer;
const myOfficeSchemes = colorSchemes.office;
const myTableauSchemes = colorSchemes.tableau;