Patterns are a great way to create charts that don't depend on color-coding, and they can be used in color or monochromatic devices or print media. And they are, of course, color-blind safe. You can create patterns using HTML Canvas commands somewhat similar to the ones used for gradients, but it's much easier to use a plugin, such as the Patternomaly plugin, listed in the Chart.js official documentation.

You can obtain Patternomaly by downloading the JavaScript library from its GitHub repository (github.com/ashiguruma/patternomaly) or by using a CDN link:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/patternomaly.min.js">
</script>

To generate a pattern, all you have to do is choose a color and call pattern.generate(), which will randomly select 1 of the 21 patterns available:

pattern.generate('rgb(50%,20%,10%');

You can also choose a specific pattern as the first argument of pattern.draw():

pattern.draw('triangle', 'lightblue');

A list of the supported patterns is shown as follows (Colors/colors-4-patternomaly.html):

The generate() function also accepts an array of colors as an argument. You can include the palette obtained for the Color Brewer example and generate patterns based on them:

let patternArray = ['#d73027','#fc8d59','#fee090','#e0f3f8','#91bfdb','#4575b4'];
pattern.generate(patternArray);

Let's use patterns to color our bar chart. For this example (Colors/colors-5-pattern.html), we will pass a call to the pallete() function from the palette.js library (which returns an array of colors) as the parameter for generate(), and assign it to the backgroundColor property for the bars:

backgroundColor: pattern.generate( palette('tol', 6).map(n=>'#'+n) ),

The result is shown as follows: