Chart.js - open source HTML5 charting library | Hacker News Reader

Chart.js - open source HTML5 charting library

chartjs.org

244 pointsnnnnnick58 comments

A bit of the shame on the 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."

Most charts are far more useful with rollovers to let the user interpret the data. I'd say this is a must have for most anything where you really are trying to give the user insight into the dataset.

Also seems to be a bit of a punt by saying this just isn't possible in Canvas. We know where the cursor is no? And we know where the points are. So can't we react to the cursor hovering over a point? What am I missing?

I completely agree, without user interaction these charts aren't all that useful for most cases. I make games using HTML5, and it is quite easy to interpret user input such as mouse over/out on the canvas.

Why not just use SVG? What browser supports Canvas but not SVG?

Edit: The answer is Android < version 3.0. The author claims that iOS < 5.0 doesn't support SVG but that's not true

We actually have our own in-house charting library at Chartbeat that uses Canvas that does exactly that (roll over the main chart):

http://chartbeat.com/publishing/demo/

Nice! FYI, those charts are VERY fuzzy on my retina display. :(

Yeah. We're actually in the process of moving to D3 partly because of this. :\

We recently released an HTML5 Canvas Based Charting Library that supports Interactivity. Its not free though http://canvasjs.com/

I have a little application with charts. I was using jqplot but IMHO it was too heavy and I started googling for a lighter solution. I found flot. flot is based on canvas and has user interaction. I don't know how it is implemented (btw flot is mit licensed) but it works. it's a shame that this library doesn't support user interaction

http://people.iola.dk/olau/flot/examples/interacting.html

Well done nick. This is the perfect example of a unicorn project - the perfect mix a technical solution, but with immaculate design sense. Even the documentation is beautiful.

Would love to see this MIT licensed.

I would love to see you rewarded for this project. Donations or a commercial support licence?

Just updated the online docs and readme on Github with an MIT license, so feel free to use!

One thing I love about Highcharts is that the documentation is heavily linked to examples on jsfiddle. Your documentation looks really nice and you have lots of nice examples, but I can't play with them.

edit: I meant to say that I can't play with them as far as I can tell. Is there a way that I'm missing?

+1 on this - jsfiddle documentation would be killer !

Good job, your charts look really good. Too bad they aren't interactive, it makes the legend+values mandatory to understand the data. Unless you just want to use them as art.

Also, the pie chart and doughnut charts seem odd. The general rule is to order the values clockwise (biggest piece starts in top middle and extends to the right). It really helps readability and is a convention.

Keep up the good work!

Indeed. I was looking at this hoping to find a way to label pie charts or even have the inner circle of the doughnut chart display the part of the chart I'm hovering over.

A great start! Definitely room to grow.

I've been making a ton of d3/html5 charts lately, and I've been terribly dissappointed by the open source offerings of graphs that are both beautiful(tons on dribbble, few even in html) and functional. Was going to work on one, but this actually looks really good!

edit: any reason you decided not to use D3 for this?

Found this in the docs:

"Chart.js uses the canvas element, which is a single DOM node, similar in characteristics to a static image. This does mean that it has a wider scope for compatibility, and less memory implications than SVG based charting solutions. The canvas element also allows for saving the contents as a base 64 string, allowing saving the chart as an image.

In SVG, all of the lines, data points and everything you see is a DOM node. As a result of this, complex charts with a lot of intricacies, or many charts on the page will often see dips in performance when scrolling or generating the chart, especially when there are multiple on the page. SVG also has relatively poor mobile support, with Android not supporting SVG at all before version 3.0, and iOS before 5.0. (caniuse.com/svg-html5)."

But on the other hand, SVG is infinitely more useful if you want to extract chart data from the page.

or display the same chart somewhere other than a web page, eg: a PDF or IOS app.

well, it's pretty easy to go from canvas to png, which I think is more portable than svg + css

How do you do that? I right-clicked on some graph, but there is not "Save Image As" option in Chrome

It's a canvas API function. So the author has to add this function (which is trivial).

On the docs page, in Chrome, hit ctrl+shift+J (option+cmd+J on OSX) to open the console, and paste this in:

$('canvas').click(function() { window.open( this.toDataURL("image/png") , 'Serialized Canvas' , 'height=' + this.height + 'width=' + this.width ); });

This will popup a png version of a canvas graph if you click it.

How is that more useful than a link to the source data in a format appropriate to the data?

It's not, but how often do you see a news source link to the raw data?

But this also a the advantage when it comes to tooltips or clickable elements. In a canvas based chart there is no easy way to have to do this.

I don't understand this. I've used jQuery.sparklines before, which I thought was HTML5, so I double checked that implementation, albeit with Chrome dev tools. It appears to be a canvas, but still has interactivity.

http://omnipotent.net/jquery.sparkline

Is that implementation compatible with your library? I'd love to be able to see exact datapoints.

Also, adding sparklines would make this a great all-in-one charting tool.

I found quite a few existing SVG based graphing libraries based off d3 or Raphael, and wanted to create something a bit more lightweight - canvas sacrifices interactivity for raw speed.

I wanted Chart.js to be dependency free, which has led to a footprint of only ~4.4kb when minified and gzipped, d3 is a lot more complex, and has a gzipped size of about 10x that.

It'll have to be up to you whether canvas is the right solution in your use case over SVG!

People seem to be really put off by the lack of interactivity. Interactivity might be fun, but it mostly gets in the way and can be an impediment to telling a story because it let's developers pass the buck to the end user.

Interactivity is just a feature. What's the real benefit and purpose? So users can navigate the data? OK, then what? So they can find meaning hidden in the data? Code capable of multidimensional analysis is going to be more effective than eyeballing a 2 dimensional representation of the data.

Don't force your users to move the mouse around, hover, click, and search around for meaning.

For all charts, figure out what story you want to tell, then tell that story. Don't force your user to search for meaning.

Regarding "object oriented" vs "object orientated", the former is the standard variation while the latter is what linguists call a backformation.

http://en.wikipedia.org/wiki/Back-formation

Basically, someone interprets "orientation" as having a stem of "orientate" analogous to how "contemplation" has a stem of "contemplate". Of course, the real stem is "orient".

This is by far the best chart library of the easy offerings - outside d3.js.

I would love support for a vertical and horizontal stacked bar chart for things like budget break-downs and general side-by-side comparisons.

Your Y axis has too many values in my opinion. I know it can be hard to code, but I think the example charts can do without the *5 values.

Great job!

This seems to be exactly the library I was waiting for, because it meets several requirements: It is framework agnostic and lightweight. We are using Rickshaw at the moment, which has d3 as a dependency and that alone results in bloated javascript just to write some basic graphs. Well done and thank you!

Beautiful looking charts but what's the obsession with animation - they distract rather than aid understanding.

"An apology to open source" "At midnight on the 18th March 2013 I posted Chart.js online. On the morning of the 19th March, I've had to take it down due to IP concerns with my current employer."

It has been taken down. Looks like the project ran into some trouble.

Just curious as it seems pretty static; inputting values and outputting charts. Any capabilities to add interaction like selecting data points and analysing a particular point with it's other attributes that are not plotted?

Maybe I'm missing something but how to use it? I put Chart.js and an example html file (I just copied all relevant html from pie.html file) in a folder but when I open it all I can see is a blank page. What gives?

Finally a charting library with a decent radar chart implementation. I've had numerous uses for these over the years and the only popular use of them I've seen any time recently was in a few Pokémon games.

There's no mention about the license. This has been raised on the issue tracker: https://github.com/nnnick/Chart.js/issues/1

Just updated and closed this with an MIT license added to the docs and readme on Github.

@nnnnnick this looks great. I work with d3 on a daily basis and while I think that it's a great toolchain, the need for something small, fast and canvas based was absolutely needed. Well done.

Fantastic! No dependency, no external libs, lightweight and to-the-point. We need more like this. Thank you very much.

I haven't played with it yet and there seems no labels and/or legend support in pie charts.

Just tried printing the site to see if the charts work in print, and unfortunately, they don't. An image fall-back apparently needs to be implemented.

I really wanted to use this for my blog.

Thanks I will use this instead of highcharts in my http://weekplan.net application, it will save me a few kb.

I've been working on a reporting interface and was planning to take a look at possible charting solutions. This has been a great timing!

Looks great btw.

The tree colors at the top just looks like Pocket: Read me later

Otherwise, good job. Like other said, interactivity is lacking though

Just out of curiosity, what did you use to put together that amazing documentation?

Subscribed | I would like to know as well.

Didn't use any particular software or tools as such, but used Google prettify (https://code.google.com/p/google-code-prettify/) for coloured syntax highlighting.

Wrote the content in plain HTML, and used jQuery to build the nav on left hand side from the headings on the page.

Very nicely done :)

Great job, some of the best docs I've seen in a while.

How does this compare to Flot?

This is the most beautiful chart library I've come across so far. Good job!

Good job! Thanks for doing this. Will use it in my next project.

This is beautiful. Well done, looking forward to using it.

Really cool, looking forward to giving this a try.

Really nice work! Where can we see more examples?

So glad someone made this, fantastic work!

Superb, just what I were looking for.

Why would you call it a HTML5 library?

This is a canvas JS library.

Reply on news.ycombinator.com