6 ms·
Chart.js - open source HTML5 charting library
- deleted 14y ago[deleted]
- nicklovescode 14y agoI'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?
- udfalkso 14y agoFound 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)."
- ssrubin 14y agoBut on the other hand, SVG is infinitely more useful if you want to extract chart data from the page.
- ra 14y agoor display the same chart somewhere other than a web page, eg: a PDF or IOS app.
- hogu 14y agowell, it's pretty easy to go from canvas to png, which I think is more portable than svg + css
- shared4you 14y agoHow do you do that? I right-clicked on some graph, but there is not "Save Image As" option in Chrome
- johnyzee 14y agoIt's a canvas API function. So the author has to add this function (which is trivial).
- nickporter 14y agoOn 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.
- olefoo 14y agoHow is that more useful than a link to the source data in a format appropriate to the data?
- ssrubin 14y agoIt's not, but how often do you see a news source link to the raw data?
- akoeberle 14y agoBut 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.
- caw 14y agoI 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 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.
- nnnnnick 14y agoI 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!
- lukeholder 14y agoWell 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?
- nnnnnick 14y agoJust updated the online docs and readme on Github with an MIT license, so feel free to use!
- the_economist 14y agoReally nice work! Where can we see more examples?
- jiangth 14y agoThis is beautiful. Well done, looking forward to using it.
- ummjackson 14y agoSo glad someone made this, fantastic work!
- ummjackson 14y agoJust out of curiosity, what did you use to put together that amazing documentation?
- jjsz 14y agoSubscribed | I would like to know as well.
- nnnnnick 14y agoDidn't use any particular software or tools as such, but used Google prettify (https://code.google.com/p/google-code-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.
- NKCSS 14y agoVery nicely done :)
- ummjackson 14y agoGreat job, some of the best docs I've seen in a while.
- Sami_Lehtinen 14y agoSuperb, just what I were looking for.
- rtexal 14y agoJust 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?
- aymeric 14y agoThanks I will use this instead of highcharts in my http://weekplan.net http://weekplan.net application, it will save me a few kb.
- jpalomaki 14y agoThere's no mention about the license. This has been raised on the issue tracker: https://github.com/nnnick/Chart.js/issues/1 https://github.com/nnnick/Chart.js/issues/1
- nnnnnick 14y agoJust updated and closed this with an MIT license added to the docs and readme on Github.
- sanderjd 14y agoOne 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?
- sandGorgon 14y ago+1 on this - jsfiddle documentation would be killer !
- Kiro 14y agoHow does this compare to Flot?
- frankblizzard 14y agoThis is the most beautiful chart library I've come across so far. Good job!
- tzaman 14y agoThis 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!
- paduc 14y agoGood 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!
- jschuur 14y agoIndeed. 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.
- shenedu 14y agoGood job! Thanks for doing this. Will use it in my next project.
- nicpottier 14y agoA 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?
- HNLogInShit 14y agoRollovers are lame. The user should not be sweeping every pixel on the screen to find hidden goodies. Let's put a stop to shitty Easter-egg UI.
- james33 14y agoI 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.
- jahewson 14y agoWhy 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
- Hovertruck 14y agoWe 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/ http://chartbeat.com/publishing/demo/
- nicpottier 14y agoNice! FYI, those charts are VERY fuzzy on my retina display. :(
- xsace 14y agoThe tree colors at the top just looks like Pocket: Read me later Otherwise, good job. Like other said, interactivity is lacking though
- eknkc 14y agoI'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.
- youngtaff 14y agoBeautiful looking charts but what's the obsession with animation - they distract rather than aid understanding.
- baal80spam 14y agoMaybe 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?
- HNSucksAss 14y agoThe word is "oriented," not "orientated."
- robotmay 14y agoFinally 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.
- mhmtmhmt 14y agoFantastic! 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.
- rorrr 14y agoWhy would you call it a HTML5 library? This is a canvas JS library.
- wib 14y agoReally cool, looking forward to giving this a try.
- deleted 14y ago[deleted]
- daviddaviddavid 14y agoRegarding "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 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".
- kmfrk 14y agoThis 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!
- n8agrin 14y ago@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.
- kmfrk 14y agoJust 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.
- nwenzel 14y agoPeople 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.
- born2web 14y ago"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.