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.