How to create a line graph using ChartJS - ChartJS - dyclassroom

In this tutorial we will learn to draw line 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 line 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.

Now inside the css folder create a default.css file. This will contain the default stylesheet.

Inside the js folder create line.js file. In this file we will be writing the code to create line graphs.

And inside the project folder create a line.html file. This is the line graph page.

Now the project structure will look like the following.

Kindly ignore other files shown in the above image. They were created when I saved this project in my GitHub repository.

line.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 line-chartcanvas.

<div class="chart-container">
  <canvas id="line-chartcanvas"></canvas>
</div>

And lastly before closing of the body tag include the line.js javascript file that we created inside the js folder.

<script src="js/line.js"></script>

So, now our line.html file will look like the following.

<!DOCTYPE html>
<html>
<head>
  <title>ChartJS - Line</title>
  <link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
  <div class="chart-container">
    <canvas id="line-chartcanvas"></canvas>
  </div>

  <!-- javascript -->
  <script src="js/jquery.min.js"></script>
  <script src="js/Chart.min.js"></script>
  <script src="js/line.js"></script>
</body>
</html>

default.css

Time to write some css that will style the line.html page. Open default.css file and write the following style code.

.chart-container {
  width: 80%;
  height: 480px;
  margin: 0 auto;
}

In the above code we are targeting class .chart-container and setting its width, height and margin. Feel free to define your own style. I will always encourage you to experiment with the code and try it yourself.

JavaScript

Now its time to create the line graph.

Canvas

First we will get the canvas using its id line-chartcanvas by writing the following code.

//get the line chart canvas
var ctx = $("#line-chartcanvas");

Options

Now we will define options for the chart. For this we will create an options object variable and set its responsive, title and legend properties.

To make the graph responsive we will set responsive to true.

To create title for the line 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 line graph.
text: this is set to Line Graph
fontSize: this controls the font size of the title.
fontColor: this controls the font color of the title.

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.

And lastly, to create legend for the line 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.

So, the options will look like the following.

//options
var options = {
  responsive: true,
  title: {
    display: true,
    position: "top",
    text: "Line Graph",
    fontSize: 18,
    fontColor: "#111"
  },
  legend: {
    display: true,
    position: "bottom",
    labels: {
      fontColor: "#333",
      fontSize: 16
    }
  }
};

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 on the point.
data: an array containing the scores for each match.
backgroundColor: hex value or color name for the point of the line graph.
borderColor: hex value or color name for the line.
fill: this is set to false
lineTension: this is set to 0 to create a straight line. If its value is greater than 0 then we will have curved lines.
radius: radius of the point drawn for each score of the match.

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 line, data property set to data variable and the options property set to options.

Our final code for the line.js file

$(function(){

  //get the line chart canvas
  var ctx = $("#line-chartcanvas");

  //line chart data
  var data = {
    labels: ["match1", "match2", "match3", "match4", "match5"],
    datasets: [
      {
        label: "TeamA Score",
        data: [10, 50, 25, 70, 40],
        backgroundColor: "blue",
        borderColor: "lightblue",
        fill: false,
        lineTension: 0,
        radius: 5
      },
      {
        label: "TeamB Score",
        data: [20, 35, 40, 60, 50],
        backgroundColor: "green",
        borderColor: "lightgreen",
        fill: false,
        lineTension: 0,
        radius: 5
      }
    ]
  };

  //options
  var options = {
    responsive: true,
    title: {
      display: true,
      position: "top",
      text: "Line Graph",
      fontSize: 18,
      fontColor: "#111"
    },
    legend: {
      display: true,
      position: "bottom",
      labels: {
        fontColor: "#333",
        fontSize: 16
      }
    }
  };

  //create Chart class object
  var chart = new Chart(ctx, {
    type: "line",
    data: data,
    options: options
  });
});

Output

Y-axis Min Max value

If we want to limit the minimum and maximum value for the y-axis then we can add the scales property to the options and set the yAxes property.

In the following example we are setting the minimum value for the y-axis to -10 and maximum value to 80 and we are also defining the stepSize of 10.

Click here for the complete code from my GitHub repository.

var options = {
  scales: {
    yAxes: [{
      ticks: {
        max: 80,
        min: -10,
        stepSize: 10
      }
    }]
  },
};