

New Chart.js beta version launched - nnnnnick
http://www.chartjs.org/

======
blhack
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](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.

~~~
minikomi
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/](http://jsfiddle.net/R532h/)

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

~~~
Throwaway0812
Don't forget Highcharts...

[http://www.highcharts.com](http://www.highcharts.com)

~~~
cglee
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.

~~~
hayksaakian
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](https://github.com/nnnick/Chart.js/blob/master/LICENSE.md)

~~~
eterm
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.

------
Flip-per
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.

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

~~~
Flip-per
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](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).

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

~~~
e1g
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](https://xmlgraphics.apache.org/batik/tools/rasterizer.html)

[2] [http://wkhtmltopdf.org/](http://wkhtmltopdf.org/)

------
brok3nmachine
I recently spent about 20 minutes setting up c3
([http://c3js.org/](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.

------
ak39
Hi Nick,

Is Chartjs related to Chartjs from DevExpress?

Edit: Link
[http://js.devexpress.com/Documentation/Howto/Data_Visualizat...](http://js.devexpress.com/Documentation/Howto/Data_Visualization/Basics/Create_a_Widget?version=14_1)

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

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

~~~
nnnnnick
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!

~~~
bnycum
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.

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

------
wingerlang
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!

~~~
JelteF
Check out this one as well:
[https://morrisjs.github.io/morris.js/](https://morrisjs.github.io/morris.js/)

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

------
andyhmltn
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)

~~~
lalwanivikas
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.

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

~~~
Rodeva
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/](http://www.chartjs.org/docs/)

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

~~~
loganu
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.

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

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

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

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

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

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

~~~
nnnnnick
Cheers, sorry it took so long!

------
bricss
You've made my day! Thx!

------
georgewfraser
Why canvas instead of svg?

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

~~~
petilon
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.

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

What do you mean?

~~~
coldtea
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.

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

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

Great update, love the tooltips.

