Colors

When supplying colors to Chart options, you can use a number of formats. You can specify the color as a string in hexadecimal, RGB, or HSL notations. If a color is needed, but not specified, Chart.js will use the global default color. There are 3 color options, stored at Chart.defaults, to set:

Name	Type	Default	Description
backgroundColor	Color	rgba(0, 0, 0, 0.1)	Background color.
borderColor	Color	rgba(0, 0, 0, 0.1)	Border color.
color	Color	#666	Font color.

You can also pass a CanvasGradient (opens new window) object. You will need to create this before passing to the chart, but using it you can achieve some interesting effects.

Patterns and Gradients

An alternative option is to pass a CanvasPattern (opens new window) or CanvasGradient (opens new window) object instead of a string colour.

For example, if you wanted to fill a dataset with a pattern from an image you could do the following.

const img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    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
            }]
        }
    });
};

Using pattern fills for data graphics can help viewers with vision deficiencies (e.g. color-blindness or partial sight) to more easily understand your data (opens new window).

Using the Patternomaly (opens new window) library you can 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']
};