Navigation

Easily create stunning animated charts with Chart.js

By Sara Vieira | JavaScript | Nov 4, 2013

Charts are far better for displaying data visually than tables and have the added benefit that no one is ever going to press-gang them into use as a layout tool. They’re easier to look at and convey data quickly, but they’re not always easy to create.

A great way to get started with charts is with Chart.js, a JavaScript plugin that uses HTML5′s canvas element to draw the graph onto the page. It’s a well documented plugin that makes using all kinds of bar charts, line charts, pie charts and more, incredibly easy.

To see how to use chart.js we’re going to create a set of 3 graphs; one will show the number of buyers a fictional product has over the course of 6 months, this will be a line chart; the second will show which countries the customers come from, this will be the pie chart; finally we’ll use a bar chart to show profit over the period.

 

Setting up

The first thing we need to do is download Chart.js. Copy the Chart.min.js out of the unzipped folder and into the directory you’ll be working in. Then create a new html page and import the script:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<script src='Chart.min.js'></script>
</head>
<body>
</body>
</html>

 

Drawing a line chart

To draw a line chart, the first thing we need to do is create a canvas element in our HTML in which Chart.js can draw our chart. So add this to the body of our HTML page:

<canvas id="buyers" width="600" height="400"></canvas>

Next, we need to write a script that will retrieve the context of the canvas, so add this to the foot of your body element:

<script>
    var buyers = document.getElementById('buyers').getContext('2d');
    new Chart(buyers).Line(buyerData);
</script>

(We can actually pass some options to the chart via the Line method, but we’re going to stick to the data for now to keep it simple.)

Inside the same script tags we need to create our data, in this instance it’s an object that contains labels for the base of our chart and datasets to describe the values on the chart. Add this immediately above the line that begins ‘var buyers=’:

var buyerData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203,156,99,251,305,247]
}
]
}

If you test your file in a browser you’ll now see a cool animated line graph.

 

Drawing a pie chart

Our line chart is complete, so let’s move on to our pie chart. First, we need the canvas element:

<canvas id="countries" width="600" height="400"></canvas>

Next, we need to get the context and to instantiate the chart:

var countries= document.getElementById("countries").getContext("2d");
new Chart(countries).Pie(pieData, pieOptions);

You’ll notice that this time, we are going to supply some options to the chart.

Next we need to create the data. This data is a little different to the line chart because the pie chart is simpler, we just need to supply a value and a color for each section:

var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];

Now, immediately after the pieData we’ll add our options:

var pieOptions = {
	segmentShowStroke : false,
	animateScale : true
}

These options do two things, first they remove the stroke from the segments, and then they animate the scale of the pie so that it zooms out from nothing.

 

Drawing a bar chart

Finally, let’s add  a bar chart to our page. Happily the syntax for the bar chart is very similar to the line chart we’ve already added. First, we add the canvas element:

<canvas id="income" width="600" height="400"></canvas>

Next, we retrieve the element and create the graph:

var income = document.getElementById("income").getContext("2d");
new Chart(income).Bar(barData);

And finally, we add in the bar chart’s data:

var barData = {
	labels : ["January","February","March","April","May","June"],
	datasets : [
		{
			fillColor : "#48A497",
			strokeColor : "#48A4D1",
			data : [456,479,324,569,702,600]
		},
		{
			fillColor : "rgba(73,188,170,0.4)",
			strokeColor : "rgba(72,174,209,0.4)",
			data : [364,504,605,400,345,320]
		}

	]
}

As you can see, the data is largely the same, except this time we’ve chosen to use RGBA to specify our colors which allows us to add transparency.

 

Conclusion

You can view a demo of this in action here, and if you prefer copy and paste, here is the full script:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chart.js demo</title>
<!-- import plugin script -->
<script src='Chart.min.js'></script>
</head>
<body>
<!-- line chart canvas element -->
<canvas id="buyers" width="600" height="400"></canvas>
<!-- pie chart canvas element -->
<canvas id="countries" width="600" height="400"></canvas>
<!-- bar chart canvas element -->
<canvas id="income" width="600" height="400"></canvas>
<script>
// line chart data
var buyerData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "rgba(172,194,132,0.4)",
strokeColor : "#ACC26D",
pointColor : "#fff",
pointStrokeColor : "#9DB86D",
data : [203,156,99,251,305,247]
}
]
}
// get line chart canvas
var buyers = document.getElementById('buyers').getContext('2d');
// draw line chart
new Chart(buyers).Line(buyerData);
// pie chart data
var pieData = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// pie chart options
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
// get pie chart canvas
var countries= document.getElementById("countries").getContext("2d");
// draw pie chart
new Chart(countries).Pie(pieData, pieOptions);
// bar chart data
var barData = {
labels : ["January","February","March","April","May","June"],
datasets : [
{
fillColor : "#48A497",
strokeColor : "#48A4D1",
data : [456,479,324,569,702,600]
},
{
fillColor : "rgba(73,188,170,0.4)",
strokeColor : "rgba(72,174,209,0.4)",
data : [364,504,605,400,345,320]
}
]
}
// get bar chart canvas
var income = document.getElementById("income").getContext("2d");
// draw bar chart
new Chart(income).Bar(barData);
</script>
</body>
</html>

The great things about Chart.js are that it’s simple to use and really very flexible. Plus, once you’ve mastered the basics here, you’ll discover that there are tons of options listed in the documentation.

 

Have you used Chart.js? Do you prefer a different solution? Let us know in the comments.

Share this post
Comments (no login required)
  • mobabur94

    i just started using chartjs, it is awesome :D

  • Robin Hassel

    Thanks for this tutorial. I´m building lots of charts at work.

  • josep2

    Thanks for your good work.

  • Daniel

    What is a “a JavaScript plugin”?

  • Willian

    They’re nice, but how do you know what data you’re showing in the pie, doughnut, radar and polar charts? They have no labels.

    • Sara Vieira

      That is definitely a limitation of this plugin , you need to create and position the labels yourself. Hopefully they will change that in the future.

  • raidenfox

    you are pretty limited if u wanna add some more numbers or figurers around your charts, the google chart API is therefore a good alternative.

  • Keith Weston

    Any live examples where this is being used to show meaningful data? I had to pass on it when I couldn’t find anyway to label anything or show tooltips so you know what you’re looking at. http://canvasjs.com is just as easy, has labels, tooltips and looks just as good.

    • roblevintennis

      Firstly, thanks for a very nice and easy to follow tut Sara! I went through the examples and even tweaked some of the options. The library is easy to use…yes.

      As Keith mentions, the library is admittedly not built for interactivity:
      “If you are looking to add interaction as a layer to charts, Chart.js is not the library for you. A better option would be using SVG, as this will let you attach event listeners to any of the elements in the chart, as these are all DOM nodes.”

      Of course the flip side is if you only require static viz it’s fast and easy to get going quickly. I could even see combining this with another charting solution, custom SVG solution, etc., on a need by need basis.

      I’d suggest addressing this concern with perhaps some recommendations at the end of your wonderful tutorial to make it even more useful :)

      Thanks again

  • http://www.facebook.com/jessedouglas Jesse-Douglas Mathewson

    It would be helpful if the script tutorials were immediately followed by images rather than needing to turn to a demo to see what the results are.

  • http://www.infobizzs.com/ Steve Fort

    Its awesome tutorial. I want to try this today..Thanks..

    http://infobizzs.com/services.php

  • Justin

    Two questions. How do I give the x and y axis titles? And how do I change the color of the line at just one particular point?

  • Chris

    I have everything set up the way you do and it still will not work for me. No idea what I am doing wrong

  • nondimwit

    Doesn’t work; in any browser.

  • sankar s

    How to display value labels above graph bars

  • http://nidhinpd.blogspot.com Nidhin

    How to give names to dataset ..like in highchart….