
Chart.js 2.0 Released - etimberg
http://www.chartjs.org/
======
derekperkins
One of the Chart.js contributors here. Version 2.0 is a massive overhaul of
the underlying library focused on ease of use and extensibility. Hundreds of
issues from the 1.x branch have been resolved, making Chart.js even more
stable and user friendly than ever! Here are a few of the core changes:

\- Github Organization: Moved from github.com/nnnick/Chart.js to our own org,
github.com/chartjs/Chart.js, where we hope to continue to grow the awesome
community

\- Scales: New time axis, log axis and multiple axis support

\- Animations galore: Just about everything animates now, from adding/removing
datasets, updating data or even changing colors. Based on canvas, animations
run at 60fps even with tens of thousands of data points

\- Dynamic config: It used to be difficult to interact with a chart after
creating it, but now it is as simple as changing the object and calling the
update function

\- Mixed charts: It is now trivial to put a line on a bar chart or whatever
combination floats your boat

\- Legends: Now supported for all chart types, they can be placed anywhere on
the canvas and support toggling data visibility by default

\- Chart types: More charts supported out of the box, including stacked
area/bar and bubble charts

\- Labels: Built-in chart titles and axis labels make it easy to understand
your data

\- Responsive and mobile ready: Charts, labels and legends all scale down to
accommodate any screen size out of the box, with touch event support

\- too much awesomeness to list here

Moving forward, the core team is committed to a faster release cycle. Version
2.1 is slated to come out in the next week with:

\- Plugin support: Add optional support for features like zoom/pan
(forthcoming) without adding bulk to the core library

\- Shared data between charts

We'd love your help, so please join and contribute! We have a very active
Slack community that you can join at [https://chartjs-slack-
automation.herokuapp.com](https://chartjs-slack-automation.herokuapp.com).
We'd love to add new chart types and to get the documentation translated, so
if you think you can help, we'd love to have you!

~~~
mikerg87
I wish the site had a dedicated demo gallery to show case the features,
especially the animation and responsiveness. There are some demos in the
documentation, but nothing that gives chartJS the showcase it deserves.

Don't get me wrong. This is a wonderful piece of work and I want everyone
involved to succeed.

~~~
amelius
In a demo, I'd like to see especially how degenerate cases are handled. For
example, in a point-graph, lots of points almost at the same location. Or in a
bar-graph, some very small bars, and some very large bars. Also, I'd like to
see how it handles huge amounts of data.

Convince us that this library is ready for the real world :)

~~~
derekperkins
@amelius - those are great suggestions. If you could built it in or even help
supply the datasets, we could get that up pretty fast.

------
lossolo
I am using metrichgraphics[1], it's based on D3.js I was looking at charts.js
but it didn't had enough options.

[1]
[http://metricsgraphicsjs.org/examples.htm](http://metricsgraphicsjs.org/examples.htm)

~~~
dk8996
I haven't used this but found this chart lib based on D3.js called C3.js.
[http://c3js.org/](http://c3js.org/)

~~~
welder
[https://wakatime.com](https://wakatime.com) uses C3.js on the main dashboard
for it's flexibility and ease-of-use. The mobile support in Chart.js 2.0 might
make us take a second look at it.

------
dmeagor
We've been using the old version on kwiksurveys.com for a year or so now. Like
many we used to use Highcharts but it had some serious performance
compatibility issue with AngularJS 1.x (I'm sure they've fixed it now.)

The big problem with ChartJS was the lack of horizontal bar charts. From
memory there was a 3rd party plugin for this but the author himself admitted
it was a bit of a bodge.

Disappointed to see that this wasn't added to the new version. I hope this is
something the team considers in the future.

I look forward to getting this up and running on our site though.

~~~
etimberg
Hey @dmeagor, I'm one of the Chart.js maintainers. Horizontal bar charts are
on our radar to implement. Most of the work has been done. The scales already
fit nicely. The only thing that needs to be implemented is a controller for it
all.

~~~
dmeagor
Really pleased to hear that. We love ChartJS, switching over to it from
Highcharts was a breeze and I'd recommend others take a look too. From what I
remember the API was nice and simple to work with.

------
dsjoerg
Hi, this looks pretty. I've been a happy highcharts user for several years;
can you summarize what's good/better/different about chartjs?

~~~
derekperkins
1\. License: As other commenters have said, it's fully open source and free to
use for commercial projects.

2\. Canvas vs SVG: For my use case, using SVG for lots of data points really
slowed down the DOM. Canvas doesn't have that limitation and is easier to
export to images if necessary. SVG is nice because you can use CSS to style
things.

~~~
TheAceOfHearts
FWIW, and I literally JUST learned this from another link in this thread:
Highcharts now has boost.js [0], which lets you use Canvas, for when you need
the performance boost.

[0] [http://www.highcharts.com/articles/2-news/175-highcharts-
per...](http://www.highcharts.com/articles/2-news/175-highcharts-performance-
boost)

~~~
derekperkins
That's pretty cool.

------
JohnKacz
Awesome. I used Chart.js for a project a year ago or so and really liked it.

It looks like the documentation is missing some of the new 2.0 chart types.

Edit: Nevermind. It looks like they are not new types per se, but new options
on old types. Scale, Stacked, etc.

------
angilly
Yes!!! I've been waiting for this to be ready for a while. Psyched to
integrated it into [https://ChartURL.com](https://ChartURL.com) !

------
revicon
FYI, samples/pie-customTooltips.html throws a JS error and doesn't load. I
think your script include is missing the "dist" dir.

I filed a Github issue here:
[https://github.com/chartjs/Chart.js/issues/2369](https://github.com/chartjs/Chart.js/issues/2369)

screenshot: [http://i.imgur.com/so0iHU3.png](http://i.imgur.com/so0iHU3.png)

------
devbug
I've been doing a bunch of graphing for my current projects and have tried a
variety of libraries. Chart.js has been the best experience by far. Yeah,
there's rough edges here-and-there if you're doing really strange stuff to
your graphs like me, but the community around it has been beyond helpful and
solving the odd issue that crops up is not difficult at all.

~~~
etimberg
Glad you've had a good experience @devbug

------
derekperkins
One of the Chart.js contributors here. Version 2.0 is a massive overhaul of
the underlying library focused on ease of use and extensibility. Hundreds of
issues from the 1.x branch have been resolved, making Chart.js even more
stable and user friendly than ever! Here are a few of the core changes:

\- Github Organization: Moved from github.com/nnnick/Chart.js to our own org,
github.com/chartjs/Chart.js, where we hope to continue to grow the awesome
community \- Scales: New time axis, log axis and multiple axis support \-
Animations galore: Just about everything animates now, from adding/removing
datasets, updating data or even changing colors. Based on canvas, animations
run at 60fps even with tens of thousands of data points \- Dynamic config: It
used to be difficult to interact with a chart after creating it, but now it is
as simple as changing the object and calling the update function \- Mixed
charts: It is now trivial to put a line on a bar chart or whatever combination
floats your boat \- Legends: Now supported for all chart types, they can be
placed anywhere on the canvas and support toggling data visibility by default
\- Chart types: More charts supported out of the box, including stacked
area/bar and bubble charts \- Labels: Built-in chart titles and axis labels
make it easy to understand your data \- Responsive and mobile ready: Charts,
labels and legends all scale down to accommodate any screen size out of the
box, with touch event support \- too much awesomeness to list here

Moving forward, the core team is committed to a faster release cycle. Version
2.1 is slated to come out in the next week with: \- Plugin support: Add
optional support for features like zoom/pan (forthcoming) without adding bulk
to the core library \- Shared data between charts

We'd love your help, so please join and contribute! We have a very active
Slack community that you can join at [https://chartjs-slack-
automation.herokuapp.com](https://chartjs-slack-automation.herokuapp.com).
We'd love to add new chart types and to get the documentation translated, so
if you think you can help, we'd love to have you!

------
acbart
Any way to make histograms conveniently with this system? Can't seem to find
anything. That'd be the major thing preventing me from switching away from D3.

~~~
jonahx
Assuming you are starting with just an array of values, and you want to plot a
histogram of the frequency of those values, you are just a one-liner away --
using js's reduce() -- from having the data in a format for a bar graph.

------
wilsonfiifi
Well done for releasing v2.0. I really like Chart.js and would choose it over
Highcharts due to the license restrictions of the latter. But... Highcharts
handles multi-line labels effortlessly. Does Charts.js 2.0 solve this issue
[0]?

[0]
[https://github.com/chartjs/Chart.js/issues/608](https://github.com/chartjs/Chart.js/issues/608)

~~~
xGrill
I believe it does using Time Scales, however, there is no example:
[http://www.chartjs.org/docs/#scales-time-
scale](http://www.chartjs.org/docs/#scales-time-scale)

------
grouma
On a somewhat related note, I've always been impressed by the number and
quality of charting libraries for the web. A while back I was looking for
native charting libraries for Android/iOS and was disappointed. Has the
ecosystem changed at all or are most people better off with embedded web
views?

~~~
kevinqi
fwiw, I've liked
[https://github.com/danielgindi/Charts](https://github.com/danielgindi/Charts)
for iOS, which is based on an android charting library called MPAndroidChart.

------
mailmanstudio
2.0 is amazing, and the API looks more powerful. will update to my iOS
application sooner:-) Visual Chart is an iOS application basic on chart.js,
using this application you can create beautiful & powerful charts on your
mobile advice. You can download it on the App Store.

------
_RPM
Remember when HighCharts.js was the only good charting library? It also that
commercial license restriction.

------
piratebroadcast
Can some add HTML to the documentation, or maybe make a codepen, along with
using it with a CDN? Im trying to use it in a test app but I;m not quite
getting how everything is fitting together. A single HTML page with everything
on it would be really ideal.

------
psisous
Wow this looks great! thanks for the hard works guys, definitely going to try
and contribute.

------
z3t4
What I'm missing is a GUI tool that lets me upload a JSON file, then show me a
bunch of alternatives (line, bar, etc) and let me change it in the GUI. Then
give me the code to copy&paste to my webpage.

~~~
derekperkins
That's a great idea

------
code_research
This website eats way too much cpu power when active in a browser tab. I guess
the reason for this are the animations going on, this is not usable for
production. Please consider using velocity.js, thanks!

~~~
derekperkins
I only see cpu usage on the homepage which should rarely be open for long. The
actual docs don't have the same impact, so I think it should be fine as is.
Are you seeing something different?

------
kcollignon
Any examples or documentation on the new Bubble Chart type?

~~~
derekperkins
We still need to add it to the docs, but here's a sample from the repo.
[https://github.com/chartjs/Chart.js/blob/master/samples/bubb...](https://github.com/chartjs/Chart.js/blob/master/samples/bubble.html)

------
0x54MUR41
Congratulation, Chart.js!

I remember my past time working on Ionic mobile development using chart.js to
show graph of monthly incomes.

------
siraris
What's the upside of this over HighCharts which is an already mature product?

~~~
hakanito
Chart.js is open source and MIT licensed, HighCharts is proprietary and you
need to buy a license if you want to use it in a commercial product without
their logo. Also, Chart.js uses <canvas> and HighCharts uses <svg>, I've found
the former to be more performant with large datasets.

~~~
museagle
You have a good point @hakanito, I still think Highcharts is a powerful
charting tool, and it is relatively cheap to set up a nice chart. BTW many
companies are looking for developers with Highcharts skills

------
alex_g
Excited to see this! The site hadnt been usable for quite some time now.

------
slang800
duplicate of
[https://news.ycombinator.com/item?id=11561514](https://news.ycombinator.com/item?id=11561514)

~~~
dang
Thanks. We'll merge that thread with this one.

------
anc84
Where are the demos!

~~~
psisous
There are mini demos on the documentation page:
[http://www.chartjs.org/docs/](http://www.chartjs.org/docs/)

but it would be nice to see someone share something a bit more complex.

~~~
muhuk
How do you build the documentation? I can see files in the docs dir turn into
[http://www.chartjs.org/docs/](http://www.chartjs.org/docs/). But I couldn't
find any npm plugin etc.

------
kumar1981
The new site looks cool and the default theme is nice. I selected
[http://www.ZingChart.com](http://www.ZingChart.com) for my project because it
had all the chart types required. And they offered additional support options
for times when we needed a bit more help.

