# Colors
Charts support three color options:
- for geometric elements, you can change background and border colors;
- for textual elements, you can change the font color.
Also, you can change the whole canvas background.
# Default colors
If a color is not specified, a global default color from Chart.defaults
is used:
Name | Type | Description | Default value |
---|---|---|---|
backgroundColor | Color | Background color | rgba(0, 0, 0, 0.1) |
borderColor | Color | Border color | rgba(0, 0, 0, 0.1) |
color | Color | Font color | #666 |
You can reset default colors by updating these properties of Chart.defaults
:
Chart.defaults.backgroundColor = '#9BD0F5';
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000';
# Per-dataset color settings
If your chart has multiple datasets, using default colors would make individual datasets indistiguishable. In that case, you can set backgroundColor
and borderColor
for each dataset:
const data = {
labels: ['A', 'B', 'C'],
datasets: [
{
label: 'Dataset 1',
data: [1, 2, 3],
borderColor: '#36A2EB',
backgroundColor: '#9BD0F5',
},
{
label: 'Dataset 2',
data: [2, 3, 4],
borderColor: '#FF6384',
backgroundColor: '#FFB1C1',
}
]
};
However, setting colors for each dataset might require additional work that you'd rather not do. In that case, consider using the following plugins with pre-defined or generated palettes.
# Default color palette
If you don't have any preference for colors, you can use the built-in Colors
plugin. It will cycle through a palette of seven Chart.js brand colors:
All you need is to import and register the plugin:
import { Colors } from 'chart.js';
Chart.register(Colors);
Note
If you are using the UMD version of Chart.js, this plugin will be enabled by default. You can disable it by setting the enabled
option to false
:
const options = {
plugins: {
colors: {
enabled: false
}
}
};
# Advanced color palettes
See the awesome list (opens new window) for plugins that would give you more flexibility defining color palettes.
# Color formats
You can specify the color as a string in either of the following notations:
Notation | Example | Example with transparency |
---|---|---|
Hexademical (opens new window) | #36A2EB | #36A2EB80 |
RGB (opens new window) or RGBA (opens new window) | rgb(54, 162, 235) | rgba(54, 162, 235, 0.5) |
HSL (opens new window) or HSLA (opens new window) | hsl(204, 82%, 57%) | hsla(204, 82%, 57%, 0.5) |
Alternatively, you can pass a CanvasPattern (opens new window) or CanvasGradient (opens new window) object instead of a string color to achieve some interesting effects.
# Patterns and Gradients
For example, you can fill a dataset with a pattern from an image.
const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = () => {
const ctx = document.getElementById('canvas').getContext('2d');
const fillPattern = ctx.createPattern(img, 'repeat');
const chart = new Chart(ctx, {
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [{
data: [10, 20, 30],
backgroundColor: fillPattern
}]
}
});
};
Pattern fills can help viewers with vision deficiencies (e.g., color-blindness or partial sight) more easily understand your data (opens new window).
You can use the Patternomaly (opens new window) library to generate patterns to fill datasets:
const chartData = {
datasets: [{
data: [45, 25, 20, 10],
backgroundColor: [
pattern.draw('square', '#ff6384'),
pattern.draw('circle', '#36a2eb'),
pattern.draw('diamond', '#cc65fe'),
pattern.draw('triangle', '#ffce56')
]
}],
labels: ['Red', 'Blue', 'Purple', 'Yellow']
};