Add a patterened 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 docs to learn more or ask questions in the community.