Chart.js does not include a native color palette generator. In our examples so far, we have either assigned explicit colors, created color palettes with no more than six colors, or used random color-generator functions. But colors are an important means of communicating information in a chart, and should be chosen carefully. If not used with care, your chart may suggest nonexistent relationships among data, deceiving the viewer. Colors that vary in lightness and saturation suggest a sequential relationship (stronger/weaker or hotter/colder). Opposing data can be better represented using divergent color palettes, where extremes are represented by complementary colors. If your data represents different categories, it will be better visualized with a qualitative color scheme. Depending on your audience and the purpose of your chart, you may also need to consider accessibility issues, such as color blindness or rendering in color-limited devices, when selecting colors. All these tasks are facilitated by the use of a specially-designed color palette or scheme.
A color palette is a fixed-size sequence of colors and is usually represented as an array in JavaScript. A scheme represents a collection of color palettes and is usually a function (or an object) in JavaScript. You can use a scheme to generate a palette containing an arbitrary sequence of colors.
You can write your own palettes, schemes, and color generators, but it's much easier to generate carefully-selected palettes and schemes using popular services and JavaScript libraries.
ColorBrewer, by Cynthia Brewer, is a website where you can generate an array string containing a palette of colors carefully designed to not only look nice on your page, but to also consider the type of data you are using (qualitative, diverging, and sequential) and its accessibility (color blindness, display/print, and grayscale). You can select and view the effects in real time, configure accessibility and data properties, and generate a color string in different formats (including JavaScript arrays and CSS):
Let's try it out with a simple bar chart containing a single dataset listed in the code, as follows:
<body>
<canvas id="canvas" width="200" height="100"></canvas>
<script>
const data = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
datasets: [
{
data: [10, 5, 2, 20, 30, 41],
}
]
};
new Chart('canvas', { type: 'bar', data: data,
options: {legend: {display: false}} });
</script>
</body>
When you load the page, it should display a monochromatic bar chart, where all the bars share the same tone of gray.
Using the ColorBrewer site, choose a six-color palette, configure any properties you wish, and then copy the JavaScript array to your clipboard. Paste it as the backGroundColor property for the dataset:
datasets: [{
data: [10, 5, 2, 20, 30, 41],
backgroundColor:['#d73027','#fc8d59','#fee090','#e0f3f8','#91bfdb','#4575b4']
}]
Then load your chart and see the result. It should be similar to the following bar chart. The full code is in Colors/colors-1-brewer.html:
The ColorBrewer palettes are limited to nine colors (or even fewer, depending on the settings you choose). If you need more colors, you can choose them from Paul Tol's schemes page, which is also very popular, or use other generators (there are many).
Another option is to use the Google palette.js library, which contains color palette-generating functions. It supports all schemes from ColorBrewer and Paul Tol's color schemes page, and includes additional generators for HSV, RGB, and Solarized schemes. To use it, you need to include the palette.js file on your page. You can download it from the GitHub site or use a CDN:
<script src="https://cdn.jsdelivr.net/npm/palette.min.js"></script>
Now you can generate palettes by calling one of the color scheme functions listed in the demo page located at google.github.io/palette.js, shown as follows:
The demo page allows you to experiment with different schemes, check how many colors you can include in a palette, and simulate different levels of color blindness. The following code will generate a palette for our bar chart containing six colors from Paul Tol's qualitative color scheme:
const colorsArray = palette('tol', 6);
The colors array contains the hexadecimal codes of the colors, but Canvas (and Chart.js) will not show the colors unless there is a hash character before the number. The following code fixes this:
const colorsArray = palette('tol', 6).map(n=>'#'+n);
Now just set the backgroundColor property as the colors array:
backgroundColor: colorsArray
The result is shown as follows. The code is in Colors/colors-2-palettejs.html:
