Example pattern image for patternomaly

README.md

color_info = [
          pattern.draw('plus', '#ff2f00'),
          pattern.draw('cross', '#67f0d2'),
          pattern.draw('dash', '#28b781'),
          pattern.draw('cross-dash', '#4b9374'),
          pattern.draw('dot', '#706974'),
          pattern.draw('dot-dash', '#a3df68'),
          pattern.draw('disc', '#138cf3'),
          pattern.draw('ring', '#921a52'),
          pattern.draw('line', '#3b0097'),
          pattern.draw('line-vertical', '#7ea7f6'),
          pattern.draw('weave', '#9a751a'),
          pattern.draw('zigzag', '#03372d'),
          pattern.draw('zigzag-vertical', '#a11f30'),
          pattern.draw('diagonal', '#f78e00'),
          pattern.draw('diagonal-right-left', '#623f8e'),
          pattern.draw('square', '#df3f65'),
          pattern.draw('box', '#328296'),
          pattern.draw('triangle', '#684fd8'),
          pattern.draw('triangle-inverted', '#83adac'),
          pattern.draw('diamond', '#4d16ff'),
          pattern.draw('diamond-box', '#8029ad')
  ];

index.html

<canvas id="myChart" width="600" height="400"></canvas>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/patternomaly/1.3.2/patternomaly.min.js" integrity="sha512-Zjnjh2DCl/MrwdZ8FNp25vSbXac3yWUWoMn0CL8qQ/K11HGv7cJ9RGNUiojnSfqVtwbGf+eyqEEjiw2hlHd6iQ==" crossorigin="anonymous"></script>

<script>
color_info = [
          pattern.draw('plus', '#ff2f00'),
          pattern.draw('cross', '#67f0d2'),
          pattern.draw('dash', '#28b781'),
          pattern.draw('cross-dash', '#4b9374'),
          pattern.draw('dot', '#706974'),
          pattern.draw('dot-dash', '#a3df68'),
          pattern.draw('disc', '#138cf3'),
          pattern.draw('ring', '#921a52'),
          pattern.draw('line', '#3b0097'),
          pattern.draw('line-vertical', '#7ea7f6'),
          pattern.draw('weave', '#9a751a'),
          pattern.draw('zigzag', '#03372d'),
          pattern.draw('zigzag-vertical', '#a11f30'),
          pattern.draw('diagonal', '#f78e00'),
          pattern.draw('diagonal-right-left', '#623f8e'),
          pattern.draw('square', '#df3f65'),
          pattern.draw('box', '#328296'),
          pattern.draw('triangle', '#684fd8'),
          pattern.draw('triangle-inverted', '#83adac'),
          pattern.draw('diamond', '#4d16ff'),
          pattern.draw('diamond-box', '#8029ad')
  ];
  
ctx = document.getElementById('myChart').getContext('2d');
chart = new Chart(ctx, {
    type: 'pie',
    data: {
        datasets: [{
            label: 'Colors',
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
            backgroundColor: color_info
        }],
        labels: [
                 'plus', 'cross', 'dash', 'cross-dash',
                 'dot','dot-dash', 'disc','ring','line',
                 'line-vertical','weave','zigzag',
                 'zigzag-vertical','diagonal','diagonal-right-left',
                'square','box','triangle','triangle-inverted',
                'diamond', 'diamond-box'
                 ] 
    },
    options: {
        responsive: true,
        title:{
            display: true,
            text: "Color test"
        }
    }
});

</script>