How to create a bar graph using ChartJS

ChartJS

Share


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 true in order to make the title appear.
  • position: we set this to top in 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 true to display the legend.
  • position: this is set to bottom which 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



Recently Added