
Data tells meaningful stories, and with visualizations to complement it, we can glean valuable insights to find, support, and share an idea effectively. But static images often don’t enable the full capacity of data visualization.
What could we unlock if we added user interactivity with data to a website?
Whether on a project, personal website, or blog post, allowing a user to customize and explore hands-on allows for a more useful and memorable experience.
With Chart.js, you can insert stunning tables and graphs quite easily and become a more impactful storyteller. This post will guide you through the tool, including setup and creating several types of figures on a page.
So, what exactly is Chart.js?
Chart.js is a free, open-source library used to animate graphs within JavaScript files and HTML canvas
elements. It includes eight different types of graphs: line, bar, donut, pie, scatter, bubble, radar, and polar area, but it’s also possible to mix-and-match multiple figures on the same page.
What are we planning to do in this guide?
We’ll go through how to set up Chart.js, create initial graphs regarding world demographics, and style them.
Data Sources
Here are links to all the data sources used in this Tutorial.
- Distribution of the global population in 2020, by age group and world region
- World population growth rate (%)
- Nationwide population statistics
- GDP per capita vs. life expectancy statistics
Step 1: Including the library
I’ve put together a GitHub repository of everything we’ll cover in this tutorial. If you open the index.html
file, you should see a page of graphs and tables pop up in your browser.
Now, open up index.html
in a text editor for code. To easily import the latest version of Chart.js, we’ll use use this CDN link (ending in "Chart.min.js"). Then, place the link in a script
tag as shown above.
To format our charts, include CDN links to Bootstrap CSS and Bootstrap JS. If you think more information on Bootstrap would be helpful, check it out here.
Step 2: Preparing the HTML
One main thing we need to prepare before we can start visualizing our data is to define an area in our HTML where we want to draw the graph. We must add canvas
elements for each graph we want on our webpage. Here’s how this works.
In our code snippet above, we give our graph (in this case, a line graph) an id
, which is line
, to the canvas
element that we can later use to reference our designated graph element in JavaScript. You can name this element anything you want; the only thing that matters is that you use the same id
when referring to the graph within all your files. Keep in mind that every id
must be unique.
Step 3: Creating an outline in JavaScript
To keep my data easily organized, I choose to place each graph’s code in a separate JavaScript file. Feel free to follow a different format, but it is what I find works best.
Create a JavaScript file (and place it into a new folder called .js if you prefer).
Let’s break down what’s happening in line.js
. First, we locate the canvas
element added earlier to our index.html
file (notice the id
line
. Then, using that canvas
element, we create a line chart (type: 'line'
), and pass in our data.
Step 4: Inserting data
Compile all the data you need for the graphs. For this sample line graph, we’ll use The World Bank’s population growth statistics. Download the data (or enter it in manually if you wish).
Then, copy-and-paste the data into an array format as shown below. This is an integral part of the overall structure of the JavaScript files.
We can give the dataset a label as well. If you save and refresh the HTML page, you’ll see a new line graph. However, we can take steps to customize the visuals, including axis tick marks and labels, chart titles, point and line colors, hover effects, and much more!
Step 5: Formatting and styling
We can also add multiple datasets to one graph, which helps depict more trends. This is currently commented out in the code below.
For every line that we want to create, we add another object to the datasets
array. Each object can have a range of adjustments; we can not only pass new data to draw the line, but we can change the name, behavior, and looks of the line. These features can be edited as depicted in the finished line.js
file. Read more detailed descriptions about all the customizations you can choose from in the Chart.js documentation!
Finished line graph


So far, we’ve walked through how to create, personalize, and view a line graph on a webpage. Let’s look at some other visualizations offered by Chart.js. These are all included in the repository linked at the beginning of this tutorial.
Other types of visualizations
Chart.js offers several other types of charts such as tables, bar charts, pie charts, scatter charts, and more. Here is the JavaScript code for more samples.
Bar chart


Pie chart


Scatter chart

Table
This code is included in index.html
, rather than JavaScript.

Key things to remember
Keep these tips in mind as you review your code.
- Ensure that each chart’s
canvas
id
is consistent throughout your HTML and JavaScript files. - Remember to link your JavaScript files in your HTML with
script
tags. - Make sure to place a comma every time you add a new feature or dataset. Otherwise, the graph won’t render correctly (or at all).
- Refresh the HTML page after making significant changes to keep tabs on your progress.
- Have fun! Share any thoughts or questions in the comments.