Easily create stunning animated charts with Chart.js

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:

(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=':

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.

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.

Kroco

They did !

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.

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….

Patte87

Thank you! Nice tutorial…

fuck it

it sux, it doesnt draw anything when all the values are the same! [1,1,1,1,1] = empty plot

vamsi

how to set title and xAxis yaxis names for this chart

http://hachemidev.blogspot.com HachDev

it always shows me this error: “Cannot call method ‘getContext’ of null ”
how to solve it pleease

omar

try http://charts.livegap.com it’s build on ChartsJs Api . you can Visualy Create your Chart and on changing the data & the Chart properities , The chart change on real Time

Anonymoose

Thanks Sara!

andre

Hello! how do I clear or delete a chart? because I want to build many charts at different moments, in the same place, and when I build the new one, the old one stays, even when I use the same vars. thanks!