In this video tutorial from my course on Data Design With Chart.js, you’re going to create a simple line chart by using the Chart.js framework to plot out a series of points on a grid. With that done, we’ll watch the Chart.js framework do the rest of the heavy lifting for you.
You can find the source code here:
How to Create a Line Chart With Chart.js
Set Up the Canvas
Start by opening the starting CodePen for this tutorial and clicking on the Fork button to create a new copy of it. That'll take us to a new URL, where we have our own fresh copy that has the same settings applied to it.
When we're creating a chart using the Chart.js framework, we're going to need a canvas element. The Chart JS library relies on canvas elements. So create a canvas element in the HTML section, give it an ID of line-chart, and then close off that canvas element.
<canvas id="line-chart"></canvas>
We're not going to worry about styling or sizing that canvas element, because even if we try to size it using CSS or using attributes on the HTML element itself, it's not going to work. The way that Chart.js works, it's just going to resize that canvas to the size of its parent, so it's still going to take up the whole screen anyway. Later on we'll take a look at how to get around that, but for now let's just jump into our JavaScript and create the chart itself.
Create the Context Using JavaScript
The first thing we need in the JavaScript is the context of our chart, which is basically just a fancy way of saying the element that we're going to apply the chart to, which is our canvas object.
So we're going to create a variable called context, or ctx for short, and we'll set this equal to that canvas object. And we're going to point to that canvas object using jQuery. So I'm gonna use the dollar sign and parentheses, and inside the parentheses, we'll have a set of quotation marks, and inside the quotation marks, we'll use the CSS selector for that canvas object. And we're pointing to that object's ID, so we're going to type # and then the ID, which is line-chart, and then add a semi-colon at the end of that statement.
var ctx = $("#line-chart");Add the JavaScript Code to Plot the Chart
Now that we've done that, we just need one more line of code to create our chart. Now it's going to be a complex line of code, and it's actually going to end up looking like multiple lines, but it's just going to be one JavaScript statement. Here it is:
.png)
Now let me walk you through that step by step and explain what's happening.
We start by creating a variable called lineChart, and using the Chart.js syntax, we set this equal to a new Chart.
We add open and closed parentheses, and inside those parentheses we need two things:
- The object that we are applying this chart to, or the context which we have created and stored in a variable called
ctx. - An object that contains all of our data and styles for this particular chart.
We can think of this second object as a set of property value pairs. And the first property we need is going to specify what type of chart this is. And that property name is type. And then we add 'line', and that tells Chart.js that this is a line chart that we're creating.
And then we'll type a comma, and go down to the next line. And then the next thing we need is all the data that's going to go into that chart. So we'll type in the word data. And then this data property is going to be an object. So we're gonna to use curly brackets to create that object, and inside this object we're going to have a number of other property value pairs.
Inside this new object, we need a couple of things.
The first thing we need is all of the labels that are going to go along the bottom of our chart. So let's say that we want a chart that's mapping out the prices of a product over the course of a year or maybe the stock prices of a particular stock for the course of a year. So for our labels, we're going to have every individual month of the year.
The next thing we need is an array of data sets. You can have multiple data sets for a single chart, but we're just going to worry about one data set for now. So the name of this property is datasets, and this is going to be an array of objects.
When we create the array using square brackets, we can see the chart has already showed up.
We don't have any data on that chart yet, so it doesn't know how to scale all the numbers on the left side of the chart, but once we start plugging in some values, the look of that is going to change.
You really need to pay attention to what you're doing when adding the values. We need to make sure that our datasets element starts with an array, and inside that array, it has an object.
Inside that object, we're going to have first a label for the year, 2015. And then the only other thing we'll have here is our list of values, which is contained in another attribute called data. These are basically just 12 random numbers for this example.
Watch Chart.js Plot the Chart
Once we paste in those numbers, we'll see that our chart comes to life.
So now we see that, first of all, our left axis has changed to match the data that we've entered. We can also see a single data set over the course of one year, and the label that we added for 2015 is up at the top.
So that's how you create a simple line chart using Chart.js.
Watch the Full Course
Data design (or “data visualization”) is the art of displaying information in a way that is easy to consume and easy to understand. In the full course, Data Design With Chart.js, you'll learn how to use Chart.js for dynamically displaying data with interactive and eye-catching charts.
You'll take this initial line chart much further, for example by applying different styles and adding multiple data sets. Then you'll learn how to create bar charts, pie charts, and even animated charts.
