Chart.js/docs/general/colors.md

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);

:::tip 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 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	#36A2EB	#36A2EB80
RGB or RGBA	rgb(54, 162, 235)	rgba(54, 162, 235, 0.5)
HSL or HSLA	hsl(204, 82%, 57%)	hsla(204, 82%, 57%, 0.5)

Alternatively, you can pass a CanvasPattern or CanvasGradient 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.

You can use the Patternomaly 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']
};