How to create a bar graph using ChartJS
ChartJS
In this tutorial we will learn to draw bar graph using ChartJS and some static data.
Using ChartJS 2.x Download
Note! You can get the code of this tutorial from my GitHub repository.
Task
We will create a bar chart for two teams namely, TeamA and TeamB and their score for 5 matches - match1, match2, ... match5.
Project structure
We will start with the following project structure.
Inside the css folder we will create a default.css file. This will contain the default stylesheet.
And inside the js folder we will create bar.js file. In this file we will be writing the code to create the bar graphs.
And inside the project folder we will create a bar.html file.
Now the project structure will look like the following.
There are some other files shown in the above image from my other tutorials.
bar.html
Copy the HTML structure from the index.html file and make sure you have the jQuery and ChartJS javascript files included.
Now in the head include the default.css file that we created and saved in the css folder.
<link type="text/css" rel="stylesheet" href="css/default.css" />
Inside the body create a div and give it a class chart-container. And inside this div create a canvas and give it an id bar-chartcanvas.
<div class="chart-container">
<canvas id="bar-chartcanvas"></canvas>
</div>
And lastly before closing of the body tag include the bar.js javascript file that we created inside the js folder.
<script src="js/bar.js"></script>
So, now our bar.html file will look like the following.
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Bar</title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<div class="chart-container">
<canvas id="bar-chartcanvas"></canvas>
</div>
<!-- javascript -->
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/bar.js"></script>
</body>
</html>
default.css
The default.css file will contain the following.
.chart-container {
width: 80%;
height: 480px;
margin: 0 auto;
}
In the above code we are setting the width, height and margin of the .chart-container class.
JavaScript
To draw the bar graph we will write some javascript.
Canvas
First we will get the canvas using its id bar-chartcanvas by writing the following code.
//get the bar chart canvas
var ctx = $("#bar-chartcanvas");
Options
Now we will define options for the chart. For this we will create an options object variable and set its responsive, title, legend and scales properties.
We will set responsive to true to make the graph responsive.
To create title for the bar graph we will set the following for the title data object.
- display: we set this to
truein order to make the title appear. - position: we set this to
topin order to make the title appear at the top of the bar graph. - text: this is set to
Bar Graph - fontSize: this controls the font size of the title.
- fontColor: this controls the font color of the title.
To create legend for the bar graph we set the legend property.
- display: this is set to
trueto display the legend. - position: this is set to
bottomwhich defines the position of the legend. - label: this is for the legend font color and size.
And lastly, to make the y-axis start from 0 we set the scales property.
You can check the ChartJS documentation and set some other properties as well. But for this tutorial we will stick to the above mentioned properties.
So, the options will look like the following.
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Bar Graph",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
};
Data
Now its time to create a data variable that will hold the score of the two teams - TeamA and TeamB for the 5 matches.
- labels: this is an array containing the match name.
- datasets: this is an array of two objects, one for each team score.
Each object element of the datasets contains the following properties.
- label: the label to be shown when the mouse hovers the bar.
- data: an array containing the scores for each match.
- backgroundColor: an array of hex value or color name for the bars.
- borderColor: an array of hex value or color name for the bar.
- borderWidth: this is for the border width of the bars.
Instantiate the Chart class
We create a variable chart and instantiate the Chart class. We pass ctx which holds the canvas and a data object.
The data object contains the type property set to bar, data property set to data variable and the options property set to options.
If we want to create a horizontal bar we will set type to horizontalBar.
Our final code for the bar.js file
$(function(){
//get the bar chart canvas
var ctx = $("#bar-chartcanvas");
//bar chart data
var data = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [
{
label: "TeamA Score",
data: [10, 50, 25, 70, 40],
backgroundColor: [
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)",
"rgba(10,20,30,0.3)"
],
borderColor: [
"rgba(10,20,30,1)",
"rgba(10,20,30,1)",
"rgba(10,20,30,1)",
"rgba(10,20,30,1)",
"rgba(10,20,30,1)"
],
borderWidth: 1
},
{
label: "TeamB Score",
data: [20, 35, 40, 60, 50],
backgroundColor: [
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)",
"rgba(50,150,200,0.3)"
],
borderColor: [
"rgba(50,150,200,1)",
"rgba(50,150,200,1)",
"rgba(50,150,200,1)",
"rgba(50,150,200,1)",
"rgba(50,150,200,1)"
],
borderWidth: 1
}
]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Bar Graph",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
},
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
};
//create Chart class object
var chart = new Chart(ctx, {
type: "bar",
data: data,
options: options
});
});
Output
ADVERTISEMENT