How to Visualize Data With Chart.js Library?

Whether you have a website, app, or blog – data visualization is a great way to capture your reader’s attention. A beautiful graph or chart is much more engaging than trying to comprehend a list of percentages and statistics.

When learning to write for the web, I discovered that readers don’t behave the way you expect. They skim the page for images, headings, and keywords. The vast majority won’t read the whole page, and 55% will leave within 15 seconds.

Percentage of visitors that leave in under 15 seconds


See what I did there?

Readers Love Visualizations

Having visualizations in your content will help readers comprehend your message. Most of us aren’t good at understanding lists of number and percentages. We need a way to visualize these concepts and relationships to make them easy and intuitive. This is especially true of non-English speakers.


Doing this is a win-win, as readers will leave with more knowledge, and you’ll have more fans.

The trick is to choose relevant data, the right charts, and then use a great tool to create your charts.

Not All Charts Are Created Equal

There are a few options for creating web charts.

There are some free to use online chart creators such as Online Chart Tool and Live Editor. Some of these will be free, some paid. They allow you to quickly snap up a line or bar chart with a few clicks. These will look OK but probably won’t look too persuasive.

The best option is to use a custom solution that lets you graph and animate your content in a unique and professional way. There are a few jQuery data visualization libraries you can use. The best and most comprehensive (and my favorite) is the Chart.js library.


Chart.js is a cool Javascript chart library that lets you generate your graphs and charts. It even lets you add some animation to make them stand out more.

It offers features such as:

  • 8 different chart types
  • Mixed chart types
  • Different axis types
  • Animation
  • HTML 5 Canvas
  • Responsive sizing

My favorite thing, however, is that it’s completely free and open source. For all those reasons, I don’t see why you would want to use any other javascript graph library.

How Difficult Is Chart.js To Use?

Data visualization with chart.js will require a bit of knowledge of HTML5 and Javascript. If you’ve used another javascript graph visualization library before you will find it easy. 

Beginners will be able to create basic charts easily. More advanced things such as using logarithmic scales and animation will need a bit more time.

If this seems a bit too much, scroll down to the section about finding some help.

What You Can Do

Chart.js is a flexible library. There are 8 types of charts you can make:

  • Line chart
  • Bar chart
  • Radar chart
  • Polar chart
  • Pie chart
  • Doughnut chart
  • Bubble chart
  • Mixed

Here’s a quick bar chart I made with the different chart types, and how highly I rate them out of 10.


Each type can be customized you have the color, look, and shape you want. You can also mix chart types, to make it easier to compare different data sets. Check out the Chart.js homepage for more info and examples.

In this post, I’ll be looking at how to visualize data with chart.js, some examples, and where you can go for more information.

Setting Up

Chart.js is focused on being easy to set up and learn. All you need is the library and a <canvas> element in your HTML to get going.

I’ll be using the CDN to include the library – using this script tag

<script src=""></script>

The only other thing you’ll need is a <canvas> element in your HTML

<canvas id="myChart"></canvas>

If you’re more of a code geek, you can check out the GitHub project to really get your hands dirty.

Chart.js Examples

Let’s look at some simple examples of things you can create.  

Chart.js Line Chart

Line charts are one of the simplest types of graph. They consist of an X and Y axis, data points, and a line between them.

Here’s an example of a line graph made with chart.js. It plots the average hours of sleep I get per night during a typical week.


As you can see I definitely need to fix my sleeping pattern. The good thing is that I created this chart in just a couple of minutes.

All you need to do is include the setup tags I mentioned earlier, and have a Javascript file with the following code:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'hours slept',
      data: [6.5, 5, 7, 7.5, 9, 10, 6],
      backgroundColor: "rgba(153,255,51,0.4)",

This code might look a little complicated, but there is nothing to worry about. All charts are set up in the same way, then we can make minor changes to generate completely different graphs.

After some initial setup, all you need to do is add some data and labels. Have a go at playing around with this code to get some different line graphs going.


Also, try resizing your browser window. You’ll notice that the chart changes size accordingly. That’s because chart.js is responsive by default, making it easy to incorporate into your responsive website or app. You can manipulate the size in other ways, but that’s for another tutorial.

Chart.js Bar Chart

Let’s look at the bar chart I made comparing the different types of charts.


I love bar charts (as you can tell by my 10/10 rating).Luckily, like the line charts, this is easy to do. Here is the code I used to set it up:

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["Line Chart", "Bar Chart", "Radar Chart", "Polar Area Chart", "Pie Chart", "Doughnut Chart", "Bubble Chart", "Mixed"],
      datasets: [{
        label: 'Chart Types',
        data: [9, 10, 2, 4, 3, 8, 0, 3],
        backgroundColor: "rgba(255,153,0,0.4)"

As you can see, the only difference is the type has been changed from ‘line’ to ‘bar’. This demonstrates some of the power of this library, and how it can be used to efficiently create all kinds of things for your site.

Chart.js Pie Chart

Line and bar charts are easily interchangeable. Different types such as pie charts need a few extra things.

You can just change ‘bar’ to ‘pie’ in the code above to get a pie chart (try it out). But, for pie charts, we ideally want a different color for each ‘piece’ of the pie.

Here’s the code for a pie chart I made showing the proportions of people using different internet browsers:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Chrome', 'Safari', 'IE', 'Firefox', 'Other'],
    datasets: [{
      backgroundColor: [
      data: [40.7, 23.9, 15.3, 11, 9.1],


We added a few different colors for each segment, and that’s it!

Mixing Chart Types

Another cool thing about Chart.js is that you can mix chart types. Just make the overall type ‘bar’ and add different types to different datasets. Here’s a toy example about apples and oranges on different days of the week:

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      type: 'line',
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      fill: false,
      borderColor: "rgba(1,255,51,0.4)",
      backgroundColor: "rgba(1,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"


This is a nice tool for comparing different datasets.

Chart.js Other Charts

There are more types of charts to make your data even more appealing. Take a look at the Chart.js documentation for a detailed description of all the types and how to use them.

Making Them Look Awesome

Once you get past the basics you can start doing things like changing the shape, style, and color. This isn’t as difficult as you might think. Just playing around with a few parameters can give you a unique look and feel for your brand.

Also, the library can also bring things to life with movement and animation.


Of course, every library and tool has downsides. When using Chart.js you’ll be restricted in what you can create. If you go through the documentation and can’t find something that looks even remotely like what you want, you might have to look for another solution.

Developers That Can Help You

If all of this seems a little too much, or you want to create charts and animations that REALLY stand out from the crowd, you might need some help. Learning Javascript from scratch can be a pain, and you might not end up with exactly what you want.

Luckily there are developers who specialize in using Chart.js. They will be able to integrate it with what you currently use, or build it into a project from scratch.

Learn More

There is so much more to learn about Chart.js. To get stuck into some more code, take a look at the documentation. You can also check out the Chart.js homepage for more information about what it is and what you can do.


Sam Palmer

Sam Palmer

Web Developer and Tech Writer
Sam Palmer

Latest posts by Sam Palmer (see all)