Predefined color schemes for Chart.js
Branch: master
Clone or download
Latest commit 8ed64ac Jan 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs Bump version to 0.3.0 Jan 23, 2019
samples Initial commit Nov 5, 2018
scripts Initial commit Nov 5, 2018
src Add MS Office color schemes Jan 23, 2019
.eslintignore Initial commit Nov 5, 2018
.eslintrc.yml Initial commit Nov 5, 2018
.gitignore Initial commit Nov 5, 2018
.npmignore Initial commit Nov 5, 2018
.travis.yml Bump version to 0.3.0 Jan 23, 2019
LICENSE.md Bump version to 0.3.0 Jan 23, 2019
README.md Bump version to 0.3.0 Jan 23, 2019
gulpfile.js Upgrade dev dependencies Nov 18, 2018
package.json Bump version to 0.3.0 Jan 23, 2019
rollup.config.js Initial commit Nov 5, 2018

README.md

chartjs-plugin-colorschemes

npm Bower Travis Code Climate

Predefined color schemes for Chart.js

You can pick the perfect color combination for your charts from the predefined color schemes, which are based on popular tools such as ColorBrewer, Microsoft Office and Tableau.

This plugin requires Chart.js 2.5.0 or later.

Installation

You can download the latest version of chartjs-plugin-colorschemes from the GitHub releases.

To install via npm:

npm install chartjs-plugin-colorschemes --save

To install via bower:

bower install chartjs-plugin-colorschemes --save

To use CDN:

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

Usage

chartjs-plugin-colorschemes can be used with ES6 modules, plain JavaScript and module loaders.

Include Chart.js and chartjs-plugin-colorschemes.js to your page, and specify a color scheme as shown in the example below. You can pick a scheme from Color Chart.

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

Every color scheme has a number at the end of its name, which indicates the number of that colors included in the scheme. If the number of the datasets is larger than it, the same colors will appear repeatedly. A color is not modified if it is specified by dataset options.

Usage in ES6 as module

Nothing else than importing the module should be enough.

import 'chartjs-plugin-colorschemes';

Tutorial

You can find a tutorial at nagix.github.io/chartjs-plugin-colorschemes.

Configuration

The plugin options can be changed at 2 different levels and with the following priority:

  • per chart: options.plugins.colorschemes.*
  • globally: Chart.defaults.global.plugins.colorschemes.*

All available options are listed below.

Name Type Default Description
fillAlpha Number 0.5 The transparency value for the line fill color. Must be a number between 0.0 (fully transparent) and 1.0 (no transparency).
scheme String 'brewer.Paired12' Color scheme name that is any of Color Chart.
reverse Boolean false If set to true, the order of the colors in the selected scheme is reversed.

Building

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

npm install

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

gulp build      # build dist files
gulp watch      # watch for changes and build automatically
gulp lint       # perform code linting
gulp package    # create an archive with dist files and samples

License

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