Get Started with Dataviz Using Chart.js
By Lyzi Diamond

February 19, 2019

Get Started with Dataviz Using Chart.js

Chart.js is a JavaScript library for making interactive charts and graphs. It provides tools for creating eight different types of charts with any data you want, each with a bunch of customizations to make them pretty, functional, and informative.

For our Chart.js Starter App, we created a bar chart and a pie chart showing population data by continent (courtesy Wikipedia).

In the next section, we describe how the code in this app works. Feeling comfortable with the app? Skip down to "" section!

How it works #

The code powering this app is in three files: index.html, style.css, and script.js. These three files work together to create the interactive chart experience on the page.

index.html contains the scaffolding of the app — the main structure for the elements on the page. This includes a div element for each chart with an empty canvas element inside of it:

index.html also contains a link to the Chart.js library in the head section of the document. This link must be included in order to use any of the Chart.js functionality in our app.

style.css contains styling information for the page. This is where the purple border around the charts is defined as well as the positioning rules for the div elements that contain the charts.

script.js is where the chart logic lives. The file starts with a data variable that houses an object containing continents and their populations.

While it is common to store data in an object like this (with key-value pairs representing data points), sometimes a JavaScript library will require the data to be structured in a different way in order for it to do its job — in this case, make a chart. Chart.js expects the data to be broken into two arrays, or lists: a list of the "labels" for the data (the keys in the data object) and a list of the "data" associated with those labels (the values in the data object).

If we were to type out these arrays manually, it would look like this:

But instead of copy-pasting these arrays directly into the code, in this app we create them dynamically from the data object. This way, if the data changes in the future, the only thing that has to be updated is the data object and the arrays will automagically contain the correct information.

To create these arrays from the data object, we can use some of JavaScript's built-in functionality. Object.keys will return an array of the keys in an object — in this case, an array of continents names, which is what we want for continents. Then, we run a forEach loop over the continents array and add each continent's population value to a separate array called populations.

Now that the data is in a good format, it's time to make some charts! For the first chart, we create a variable bar (but it could be called anything) and set it to target the HTML element where we want to place the chart. In this case, it's the canvas element with id barChart. Then we create a new Chart and tell it where it's going to live on the page by passing bar as the first parameter.

barChart needs more information than just where it's supposed to go in the HTML to make the chart we want. The second parameter to Chart is an object that contains all of the options we want to be included in our chart. These include:

In this chart, we want to specify the data to be visualized. Inside the data object, we set the value of labels to the continents array and define a dataset with populations as the data being charted. We also add styling information, like the color of the bars, the color of the borders, and how wide the borders should be. Lastly, we include options to make sure that the bar chart starts its y-axis at 0.

The last bit of script.js creates a pie chart, which is a similar process to creating a bar chart. Can you spot the differences?

The Challenge #

Like all Glitch apps, you can remix the Chart.js Starter App and customize it to your heart's content. But for those of us who are just learning to code, it can be hard to get started — especially with a library we've never used before! That's where our challenge comes in.

We challenge you to a footrace... around the world!

Just kidding. Our challenge to you is to take the Chart.js starter app and give it your own personal spin. In particular, we are looking to see if you can do any of the following:

If you have any questions or need help, reach out to us on Twitter @glitch or post your question in the support forums.

Bonus: tips and tricks #

Feeling stuck? Fear not! Here are some tips and tricks to help you get started.