# 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:

Colors plugin palette

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']
};
Last Updated: 11/14/2022, 11:17:20 PM