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.
Installation
We can add the Chart.js library from CDN.
In HTML
<script src='https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js'></script>
Also, we can install the NPM package version by running:
npm install chart.js --save
The Bower package can be installed by running:
bower install chart.js --save
Creating a Chart
We can then create a chart by creating our canvas element:
<canvas id="myChart" width="400" height="400"></canvas>
And then we can add our JavaScript code for the graph:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 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 get the canvas elementâs context.
Then we use the Chart
 constructor to create our chart.
type
 has the chart type.
label
 has the legend label.
The labels
 property has the x-axis labels.
datasets
 has the data for the chart.
data
 has the y-axis cooredinates.
backgroundColor
 has the background color for the bars.
borderColor
 has the border color for the bars.
borderWidth
 has the border width.
options
 has some options for the graph.
scales
 has the graph scales.
We have the beginAtZero
 option set to true
 so that the y-axis starts at 0.
Â
Accessible Charts
We can make our charts accessible with the aria-label
 and role
 attributes.
For example, we can write:
<canvas id="myChart" width="400" height="400" aria-label="bar chart" role="img"></canvas>
We can add fallback content with:
<canvas id="myChart" width="400" height="400" aria-label="bar chart" role="img">
<p>fallback</p>
</canvas>
Responsive Charts
Charts can be made responsive with a wrapper element.
We style that remove the height and width from the canvas and put that in the wrapper element.
For instance, we can write:
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
<canvas id="myChart"></canvas>
</div>
We put the styles in the div instead of the canvas.
Now the chart should resize when we resize the screen.
The chart can also be programmatically resized:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: '# of Votes',
data: [12, 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
}
}]
}
}
});
myChart.canvas.parentNode.style.height = '428px';
myChart.canvas.parentNode.style.width = '428px';
We changed the canvasâ parent nodeâs height and width.
Conclusion
We can create a simple chart with Chart.js with some JavaScript code.
Share