We can make creating charts on a web page easy with Chart.js. In this article, we’ll look at how to create charts with Chart.js.
Indexable Options
Indexable options are options that are arrays. For example, we can write:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [-1, 19, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
We have the backgroundColor
and borderColor
options which are indexable options.
The values are set on the bars according to the bars’ indexes.
Option Context
The option content gives us contextual information when we resolving options.
They are used only with scriptable options.
The properties of the context object include:
chart
— the chart we’re modifyingdataIndex
— index of the current datadataset
— dataset at indexdatasetIndex
datasetIndex
— index of the current datasethover
—true
if hovered
Colors
We can set the color options in various ways.
One way is to change the background color to a fill pattern.
For example, we can write:
var img = new Image();
img.src = 'https://www.toptal.com/designers/subtlepatterns/patterns/more-leaves.png';
img.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
var fillPattern = ctx.createPattern(img, 'repeat');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [2, 19, 3],
backgroundColor: fillPattern,
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
};
We created an Image
instance and we called the createPattern
method of the context to create a fill pattern that we can use in our chart bars.
'repeat'
makes the pattern repeat to fill the bars.
Then we set that as the value of backgroundColor
and it’ll show as the bar color.
We can use it with the following HTML:
<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/patternomaly@1.3.2/dist/patternomaly.min.js"></script>
<canvas id="myChart"></canvas>
Then we can create a chart by writing:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [2, 19, 3],
backgroundColor: [
pattern.draw('square', '#ff6384'),
pattern.draw('circle', '#36a2eb'),
pattern.draw('diamond', '#cc65fe'),
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
The pattern.draw
method comes from the Patternomaly library.
'square'
makes a square repeating pattern.
'circle'
makes a circle repeating pattern.
And 'diamond'
makes a diamond repeating pattern.
The 2nd argument is the background color.
Now we should see bars with the given background patterns.
Conclusion
We can create charts with various color options with Chart.js.