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.

  1. var img = new Image();
  2. img.src = 'https://example.com/my_image.png';
  3. img.onload = function() {
  4.     var ctx = document.getElementById('canvas').getContext('2d');
  5.     var fillPattern = ctx.createPattern(img, 'repeat');
  7.     var chart = new Chart(ctx, {
  8.         data: {
  9.             labels: ['Item 1', 'Item 2', 'Item 3'],
  10.             datasets: [{
  11.                 data: [10, 20, 30],
  12.                 backgroundColor: fillPattern
  13.             }]
  14.         }
  15.     });
  16. };

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.

  1. var chartData = {
  2.     datasets: [{
  3.         data: [45, 25, 20, 10],
  4.         backgroundColor: [
  5.             pattern.draw('square', '#ff6384'),
  6.             pattern.draw('circle', '#36a2eb'),
  7.             pattern.draw('diamond', '#cc65fe'),
  8.             pattern.draw('triangle', '#ffce56')
  9.         ]
  10.     }],
  11.     labels: ['Red', 'Blue', 'Purple', 'Yellow']
  12. };