Colors · Chart.js documentation
Author: chartjs

# 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. This color is stored at `Chart.defaults.global.defaultColor`. It is initially set to `'rgba(0, 0, 0, 0.1)'`

You can also pass a CanvasGradient 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 or CanvasGradient 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.

    var img = new Image();
    img.src = 'https://example.com/my_image.png';
    img.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        var fillPattern = ctx.createPattern(img, 'repeat');

        var 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.

Using the Patternomaly library you can generate patterns to fill datasets.

    var 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']
    };

# results matching ""

# No results matching ""