[udfalkso]

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)."

[caw]

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.

[ssrubin]

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

[olefoo]

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

[ssrubin]

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

[ra]

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

[hogu]

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

[shared4you]

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

[nickporter]

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.

[johnyzee]

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

[akoeberle]

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.