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

You can reset default colors by updating these properties of Chart.defaults:

Chart.defaults.backgroundColor = '#9BD0F5';
Chart.defaults.borderColor = '#36A2EB';
Chart.defaults.color = '#000';
 
        Copied!
    

# 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',
    }
  ]
};
 
        Copied!
    

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

const options = {
  plugins: {
    colors: {
      enabled: false
    }
  }
};
 
        Copied!
    

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

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
      }]
    }
  });
};
 
        Copied!
    

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