Patterns

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...