chartjs-colorful
Be colorful Chart.js v3.
Homepage
Example
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
How to use
Setup
import Chart from 'chart.js/auto';
import { ColorfulScale, ColorfulPlugin } from 'chartjs-colorful';
import { defaultConverter } from 'chartjs-colorful/helpers';
import { linears, schemes } from 'chartjs-colorful/registries';
import { getD3Schemes, getOfficeSchemes } from 'chartjs-colorful/schemes';
// register scale and plugin.
Chart.register(ColorfulScale, ColorfulPlugin);
// add custom scheme
schemes.add('custom', ['#F00', '#FF0', '#0F0', '#0FF', '#00F', '#F0F']);
// add hue-rotate color.
// select key color and get 12 colors.
// NOTE createColors's 3rd argument is 'false' because rotateLinear(0) and rotateLinear(1) are the same color.
const rotateLinear = createRotateLinear('#ff7f7f');
schemes.add('rotate', createColors(rotateLinear, 12, false));
// get schemes and register.
const { namedColors: d3Schemes } = getD3Schemes();
schemes.addAll(d3Schemes);
schemes.addAll(getOfficeSchemes());
// get lininers and register.
const { namedLinear } = getD3Schemes();
linears.addAll(namedLinear);
Select scheme
const options = {
plugins: {
colorful: {
// set scheme name
colors: 'custom',
// or set scheme(=string[])
// colors: ['#F00', '#FF0', '#0F0', '#0FF', '#00F', '#F0F'],
// set converter. (alpha:0.5)
converter: defaultConverter,
}
}
}
Use colorful scale and valued color.
const options = {
plugins: {
colorful: {
data: [{
// linear name.(optional)
linear: 'Turbo',
// dataset index.
datasetIndex: 0,
// value field and minimum-maximum value.
value: 'r',
min: 0,
max: 50,
// colorful scale name.
axis: 'r',
}]
}
}
}
Change dataset color rule.
const options = {
plugins: {
colorful: {
dataset: [ {
types: ['pie', 'doughnut', 'polarArea'],
borderColor: 'colors',
backgroundColor: 'gradients',
hoverBackgroundColor: 'colors',
}, {
types: ['bar', 'line'],
borderColor: 'color',
backgroundColor: 'gradient',
pointBackgroundColor: 'color',
hoverBackgroundColor: 'color',
}, {
types: ['radar'],
borderColor: 'color',
backgroundColor: 'gradient',
pointBackgroundColor: 'color',
}, {
// default=(other type)
borderColor: 'color',
backgroundColor: 'color2',
hoverBackgroundColor: 'color',
},
]
}
}
}
Use other color schemes packages.
One by one
import { schemes } from 'chartjs-colorful/registries';
import { schemeTableau10 } from 'd3-scale-chromatic';
// Add a scheme(=string[]) with a suitable name.
schemes.add('Tableau10', schemeTableau10);
All at once
import { schemes } from 'chartjs-colorful/registries';
import { getBrewerSchemes, getD3Schemes, getOfficeSchemes, getTableauSchemes } from 'chartjs-colorful/schemes';
// from chartjs-plugin-colorschemes
schemes.addAll(getBrewerSchemes());
schemes.addAll(getOfficeSchemes());
schemes.addAll(getTableauSchemes());
// from d3-scale-chromatic
schemes.addAll(getD3Schemes().namedColors);