New Chart.js beta version launched | Hacker News Reader

New Chart.js beta version launched

chartjs.org

152 pointsnnnnnick62 comments

It looks like this version includes a chart legend for pie/doughnut charts! Unless I am very mistaken, the old version, which I am using in my latest product, did not :(.

Hooray chartjs people, I love your product :) -- it is definitely my favorite charting library :).

BTW, does anybody know of a charting library that will make nice 1D scatter plots? (Like this: http://i.stack.imgur.com/LGBAG.png).

These are very useful visualizations for event frequency, but I can't find any libraries that make them.

You should be able to recreate that 1D scatter plot using a regular scatter plot and setting all of the y values to 0 (unless I'm missing something).

Do you have any examples of how you'd like them to look in the browser? It shouldn't be hard to throw something together with d3 which simply takes an array.

edit: quick example. http://jsfiddle.net/R532h/

Would someone who's familiar with chart.js do a quick comparison between other popular charting libraries? I've mostly used rickshaw and d3.

Don't forget Highcharts...

http://www.highcharts.com

I really like the feel of HighCharts. I've been using HighStock (their financial charts) for traffic analytics graphs and it works really well.

Just from a cursory glance, it appears that Chartjs is entirely free and you can do what you want with it, while Highcharts is not.

It would be nice if this distinction was stated unambiguously on the front page

here's the license if you were looking for it like I was

https://github.com/nnnick/Chart.js/blob/master/LICENSE.md

Took me ages to find the license, I ended up clicking documentation and still having to search for the word license to find it. I wish it was more prominent on the landing page.

Highcharts is free for non commercial

Big fan of Highcharts. Like that you can export charts to a png. Big deal for me, don't think chart.js offers anything like that?

FusionCharts can export charts to PNG, JPG, PDF and SVG. I've been trying both FusionCharts and HighCharts for past few weeks and I can say that I am a bit inclined towards FusionCharts. Had this discussion the other day as well when Epoch[1] was released.

[1] https://news.ycombinator.com/item?id=7948560

Yep, you can call .toBase64Image() on your chart instance to return a png image encoded as a base 64 data url.

I haven't used d3 but I used chart.js a little while ago. At the time is was relatively simple but lacking some features (like support for interactions). Looks like this newest version has added some of that which is great. My guess is that it's still lighter-weight & simpler than d3 which makes it good for some use cases but not others.

Edit: I've only had good experiences with chart.js (not sure if that was clear)

Here: http://www.fusioncharts.com/javascript-charting-comparison/

Oh it's got highcharts too. Thanks.

Surely this is going to be prone to bias, even if it's only subconscious?

It can be. Therefore it's best to take it with a pinch of salt and decide for yourself. Different requirements will demand for different products. I've seen big enterprises going only for FusionCharts whereas individual developers tend to go for other options like HighCharts. But I took FusionCharts for my personal projects because it was free it had a huge library.

or morris.js http://morrisjs.github.io/morris.js/

I just gave it a try. It's nice and easy to use, but I need to draw a legend which it surprisingly doesn't seem to support, so I won't use it. Otherwise it'd have been a good match for my simple purposes (non-scaled, non-animated, non-interactive).

BTW, "options.pointDot = false" doesn't seem to have any effect. "options.pointDotRadius = 0" worked for me.

The "modular" section of the page appears to show a legend.

True, but for line charts the labels are just used for the tooltips, not for any legend. For the old charts.js version there is a legend-extension on github (https://github.com/bebraw/Chart.js.legend) which I didn't try because I didn't think it'd be compatible with the current beta-release (I might be wrong).

At work, we use Google Charts to chart data, then send images of those charts to users via email, inline. We are told that this functionality will be deprecated in the API some time next year. Anyone have an idea of how to mitigate that? Emails dont support javascript so not sure how to get around this. Just for some clarity, if you happen to use Sendgrid, they do the same thing. Google chart images in an email.

Something that involves this possibly? http://www.paulhammond.org/webkit2png/

Might be overkill, but would allow quite a bit of flexibility.

The general idea is to render the chart in a headless browser and grab a screenshot.

http://phantomjs.org/screen-capture.html

If you're ok with hosting the images yourself, I'd recommend matplotlib (http://matplotlib.org/ ) as a pretty good chart library.

Google Charts are rendered through SVG, and fortunately you have two options to reliably convert any SVG to PNG. One options is "Batik Rasterizer"[1] - it is a single .jar file, fast, and accurately renders 99% of our cases. The other options is Wkhtmltopdf[2] - it comes with a companion wkhtmltoimage binary which convert SVG to PNG through a customised webkit engine. It also is fast, and can handle our most complex visualisations.

All we do is grab the SVG source with JS, post it back to the server, and get the image back (after it is scaled/watermarked/optimised). This setup has worked well for us for some years now. Further we can easily interchange charting libraries with on concern about their native exporting options because we handle the rendering ourselves.

[1] https://xmlgraphics.apache.org/batik/tools/rasterizer.html

[2] http://wkhtmltopdf.org/

I recently spent about 20 minutes setting up c3 (http://c3js.org/) for a commercial product I'm developing. Great library, but its footprint is fairly hefty. Looking forward to giving this a try, if it is just as quick to implement.

I like Chart.js, I can't tell if I'm looking at the beta from my phone though. I'd hope they add a scatter plot then it'd be close to perfect. There might be a fork I haven't found yet, but I know anything I made wouldn't look as nice.

New site is responsive for mobile, so you should be seeing the new version!

This new release allows for custom chart types, using the same core API, so hopefully we'll see some community led new chart type extensions soon!

Thanks! I'll see if I can give it a shot, I just went back after grabbing my laptop and noticed the section on writing new chart types. Maybe I can figure it out. I have a project in mind I could use this for.

Hi Nick,

Is Chartjs related to Chartjs from DevExpress?

Edit: Link http://js.devexpress.com/Documentation/Howto/Data_Visualizat...

It is not. Currently using DevExpress at work. They've actually re-branded it as DevExtreme with their latest release (v14.1).

Looking foward to use the new beta through angles (https://github.com/lgsilver/angles) the Angular wrapper for chartjs.

Neat, I was looking over lots of different charting libraries the other day and this looks great. And it is free to use in commercial projects which, hopefully, will be relevant for me in the future!

Check out this one as well: https://morrisjs.github.io/morris.js/

Is there any free(for commercial use) candlestick charts available?

I've used Chart.JS for quite a few big projects but I always found it lacking in some crucial features (hover/tap events & legends)

andyhmltn, try FusionCharts or HighCharts instead. I have had good experience with FusionCharts till now and it also has the features(hover/tap events & legends) that you are looking for. Feel free to mail me if you get stuck somewhere. Can't say much about HighCharts as I am yet to experiment with all its features. But everyone here seems to love them, so you can find good support for it as well.

Can the data in the charts be updated in realtime? I'm looking for graphs to display operations type data like cpu usage, etc over time.

Each one of the chart types has a prototype method .update() which will re-draw the chart with your updated values, so real-time updates are possible.

[1] http://www.chartjs.org/docs/

Check out Epoch: http://fastly.github.io/epoch/

Nick this is awesome. Would love to feature your work on blockspring.com so non-engineers can use chart.js graphs directly.

Sounds ace, let me know if there's anything I can do to help!

Blockspring looks like a great resource. Free to use? Spits out code to paste into html? Nick, Charts looks awesome and might make its way into my next project.

Finally hover tooltips for bar graphs! A pretty important feature Chart.js was lacking before in my opinion.

I've used rickshaw and nvd3 - chart.js seems pretty minimal compared to them.

We tried NVD3 when we built http://www.chartblocks.com as it would have saved us loads of time. It wasn't great though and had almost no flexibility.

If NVD3 didn't work out for you, what did charting library did you choose instead?

Interactive mode for tooltips. That's great news, very excited about that!

Awesome! We've been waiting for this for some time - nice release Nick!

Cheers, sorry it took so long!

You've made my day! Thx!

Why canvas instead of svg?

SVG is a good solution too, but it can really suffer performance-wise, especially on mobile, tablet and when animating svg node positions.

Have you done any benchmarking of canvas vs svg charts?

I did a while back for my university dissertation, I'll have to see if I can dig it out.

IIRC: canvas tends to outperform svg when dealing with a lot of individual objects, due to them being individual dom nodes in svg. However svg will outperform canvas drawing fewer nodes, on a larger canvas, due to canvas being bitmap based.

Canvas is bitmap-based, while SVG is vector. If you need to print the chart SVG is going to look a lot better. Also, if you pinch-zoom the chart, SVG is going to look better. Canvas doesn't support animation -- you have to code it yourself. SVG performance is quite good unless you have thousands of elements, which a chart isn't going to have.

> Canvas doesn't support animation -- you have to code it yourself.

What do you mean?

The obvious. That canvas is just a set of pixels with colors (a bitmap image). To get animation, you have to explicitly change them every X milliseconds.

Whereas SVG has actual objects, that you can apply items like animateTransform, animateMotion etc to them directly, in a declarative style.

Ok, thanks. I didn't know that. I thought you had to clear/redraw the SVG for animation as well.

Homepage grid breaks at 1440px wide for me (Chrome/osx).

Great update, love the tooltips.

Reply on news.ycombinator.com