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/patternomaly@1.3.0/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...