Add a patterned background (Chart.js)

Patterned backgrounds in Chart.js can be achieved using the patternomaly library. QuickChart includes built-in support for patterned chart backgrounds.

The patternomaly library generates patterned canvases, and these patterns can be supplied directly as backgrounds.

In QuickChart, pattern is a built-in global that lets you generate patterns. Here's a quick example:

{
  type: 'bar',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May'],
        datasets: [{
          label: 'Dogs',
          data: [10, 50, 80, 30, 10],
          backgroundColor: pattern.draw('zigzag-horizontal', 'navy'),
        }, {
          label: 'Cats',
          data: [100, 20, 10, 90, 80],
          backgroundColor: pattern.draw('diagonal-right-left', 'darkgreen'),
        }]
    }
}

Which produces this patterned bar chart:

Patterned backgrounds can be used in any chart type. Here's a more elaborate example with a customized polar chart:

{
    "type": "polarArea",
    "data": {
        "datasets": [{
            "borderColor": 'rgb(0,0,0,1)',
            "data": [3, 5, 5, 0, 0, 6, 0, 4, 0, 0, 0, 0],
            "backgroundColor": [pattern.draw('diagonal-right-left', 'rgb(20,38,123)'), pattern.draw('dot', 'rgb(0,152,161)'), pattern.draw('zigzag', 'rgb(150,192,58)'), pattern.draw('diagonal-right-left', 'rgb(20,38,123)'), pattern.draw('dot', 'rgb(0,152,161)'), pattern.draw('zigzag', 'rgb(150,192,58)'), pattern.draw('diagonal-right-left', 'rgb(20,38,123)'), pattern.draw('dot', 'rgb(0,152,161)'), pattern.draw('zigzag', 'rgb(150,192,58)'), pattern.draw('diagonal-right-left', 'rgb(20,38,123)'), pattern.draw('dot', 'rgb(0,152,161)'), pattern.draw('zigzag', 'rgb(150,192,58)')]
        }]
    },
    "options": {
        "borderWidth": 2,
        "borderColor": "rgba(0, 0, 0, 0.8)",
        "startAngle": 0,
        "scale": {
            "ticks": {
                "backdropColor": "rgba(255, 255, 255, 1)",
                "min": 0,
                "max": 6,
                "stepSize": 1,
                "fontColor": "rgb(254,72,0)",
                "fontSize": 16,
                "z": 2,
                "padding": 10
            },
            "gridLines": {
                "display": true,
                "drawTicks": true,
                "drawOnChartArea": true,
                "drawBorder": true,
                "borderDash": [4, 5],
                "lineWidth": 2,
                "color": "rgba(0, 0, 0, 0.5)",
                "z": 1
            },
            "angleLines": {
                "display": true,
                "color": "rgba(0, 0, 0, 0.8)",
                "lineWidth": 2
            },
            "pointLabels": {
                "fontSize": 20
            }
        },
        "legend": {
            "display": false,
            "position": "bottom"
        }
    }
}

Which produces the following:

Head back to the docs to learn more or ask questions in the community.