chartjs-colorful

Be colorful Chart.js v3.

Homepage

• https://uk-taniyama.github.io/chartjs-colorful/

Example

• Support colors

• Colorful chart and scheme

• Valued color and colorful scale

• Sample UMD

Install

• yarn install: yarn add chart.js chartjs-colorful
• npm install: npm install --save chart.js chartjs-colorful

Support Scheme Packages

• chartjs-plugin-colorschemes
• d3-scale-chromatic

Interfaces

docs/README.md

How to use

Setup

1import Chart from 'chart.js/auto';
2import { ColorfulScale, ColorfulPlugin } from 'chartjs-colorful';
3import { defaultConverter } from 'chartjs-colorful/helpers';
4import { linears, schemes } from 'chartjs-colorful/registries';
5import { getD3Schemes, getOfficeSchemes } from 'chartjs-colorful/schemes';
6
7// register scale and plugin.
8Chart.register(ColorfulScale, ColorfulPlugin);
9
10// add custom scheme
11schemes.add('custom', ['#F00', '#FF0', '#0F0', '#0FF', '#00F', '#F0F']);
12
13// add hue-rotate color.
14// select key color and get 12 colors.
15// NOTE createColors's 3rd argument is 'false' because rotateLinear(0) and rotateLinear(1) are the same color.
16const rotateLinear = createRotateLinear('#ff7f7f');
17schemes.add('rotate', createColors(rotateLinear, 12, false));
18
19// get schemes and register.
20const { namedColors: d3Schemes } = getD3Schemes();
21schemes.addAll(d3Schemes);
22schemes.addAll(getOfficeSchemes());
23
24// get lininers and register.
25const { namedLinear } = getD3Schemes();
26linears.addAll(namedLinear);

Select scheme

1const options = {
2  plugins: {
3    colorful: {
4      // set scheme name
5      colors: 'custom',
6      // or set scheme(=string[])
7      // colors: ['#F00', '#FF0', '#0F0', '#0FF', '#00F', '#F0F'],
8      // set converter. (alpha:0.5)
9      converter: defaultConverter,
10    }
11  }
12}

Use colorful scale and valued color.

1const options = {
2  plugins: {
3    colorful: {
4      data: [{
5        // linear name.(optional)
6        linear: 'Turbo',
7        // dataset index.
8        datasetIndex: 0,
9        // value field and minimum-maximum value.
10        value: 'r',
11        min: 0,
12        max: 50,
13        // colorful scale name.
14        axis: 'r',
15      }]
16    }
17  }
18}

Change dataset color rule.

1const options = {
2  plugins: {
3    colorful: {
4      dataset: [ {
5          types: ['pie', 'doughnut', 'polarArea'],
6          borderColor: 'colors',
7          backgroundColor: 'gradients',
8          hoverBackgroundColor: 'colors',
9        }, {
10          types: ['bar', 'line'],
11          borderColor: 'color',
12          backgroundColor: 'gradient',
13          pointBackgroundColor: 'color',
14          hoverBackgroundColor: 'color',
15        }, {
16          types: ['radar'],
17          borderColor: 'color',
18          backgroundColor: 'gradient',
19          pointBackgroundColor: 'color',
20        }, {
21          // default=(other type)
22          borderColor: 'color',
23          backgroundColor: 'color2',
24          hoverBackgroundColor: 'color',
25        },
26      ]
27    }
28  }
29}

Use other color schemes packages.

One by one

1import { schemes } from 'chartjs-colorful/registries';
2import { schemeTableau10 } from 'd3-scale-chromatic';
3
4// Add a scheme(=string[]) with a suitable name.
5schemes.add('Tableau10', schemeTableau10);

All at once

1import { schemes } from 'chartjs-colorful/registries';
2import { getBrewerSchemes, getD3Schemes, getOfficeSchemes, getTableauSchemes } from 'chartjs-colorful/schemes';
3
4// from chartjs-plugin-colorschemes
5schemes.addAll(getBrewerSchemes());
6schemes.addAll(getOfficeSchemes());
7schemes.addAll(getTableauSchemes());
8
9// from d3-scale-chromatic
10schemes.addAll(getD3Schemes().namedColors);

License

MIT license.