Chart.js 2.0 Released | Hacker News Reader

Chart.js 2.0 Released

chartjs.org

332 pointsetimberg78 comments

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

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.

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

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

Demo's would be great. It's hard to really see what the capabilities are without some good demos.

I recently had a project which required me to trend some data on a webpage. I ended up going with a package called JQPlot. Their website had really great demos - with example code.

One thing I really need is good support for multiple Y-Axis I can't see anything on your site about how to add additional axis or customise an existing plot axis (how would I force manual scale per axis for example).

You can see the StackOverflow post I made: http://stackoverflow.com/questions/35262796/plot-multiple-sc...

Has an example screenshot of type of graph I was trying to produce.

That's the next major milestone for the docs. We've discussed it, but didn't want to delay the v2 release for it. We're planning on implementing a user showcase in addition to just a few core demos. We'd love your help if you're able to contribute!

There is a samples directory that has examples of most of the features.

I've been using the v2 beta (along with https://github.com/jhudson8/react-chartjs/tree/chartjs-v2) and have been really impressed with it in general, thanks for all the hard work!

How quick is this? I'll give it a go with our company's dataset. Unfortunately none of the javascript charting libraries could handle it so far. I am not even sure it is possible to do what I want using JS and current technology.

Have you tried HighCharts with http://www.highcharts.com/articles/2-news/175-highcharts-per... ?

It's very fast even with thousands of data points. We were combining it with github.com/crossfilter/crossfilter to do client side filtering and aggregating on hundreds of thousands of rows of data.

Hyperlink for the lazy https://github.com/crossfilter/crossfilter

Haha, I thought that HN was smart enough to hyperlink it for me. Thanks for the help. :)

It is, you just need to explicitly include the protocol (http:// or https://). For next time. :)

Would love to see an example combining the two!

I agree. I would also love to see an example combining both as well. It would be a very useful reference.

>I am not even sure it is possible to do what I want using JS and current technology.

It should doable just fine, but it seems like you expect the front end to handle millions of nodes? You should aggregate at various levels, and present sliding windows instead...

I have a feeling you process the data at the client.

Looks amazing! We've been using it for almost a year now, we'll most likely updgrade to the v2 as soon as we can!

Thanks for the hard work on this library! Such a great and simple library to use!

Can you add HTML to the documentation, 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.

We're working on adding more comprehensive demos, embedded with CodePen so they can be edited and forked. Until that is done, you can see a number of examples here: https://github.com/chartjs/Chart.js/tree/master/samples

looks awesome. Can't wait to try out this new version.

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

I think https://plot.ly/ might have the right idea which is (as I see it), do your analysis in python, R, Julia, Mathematica etc., plot using the tool you're familiar with, when you're done, capture it in plotly, which also serves as sort of an Imgur for charts.

that being said, YMMV, horses for courses, there'a a LOT of different ways to chart and different tastes, but that's my take.

I haven't used this but found this chart lib based on D3.js called C3.js. http://c3js.org/

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.

I've used C3.js for some stacked bar charts.

I like it. It took a little poking at to get what I wanted (stacked bar charts with some initially unselected), but I got it and its been working well. I came from a highcharts shop, and the setup there was different enough.

I used that as well for the same reason. While it does have a lot more options, it turns out to be really hard to customize the graphs beyond that.

Another D3-based, open source library is Contour: http://forio.com/contour/

Easy to implement basic charts like line, bar, pie, scatter, etc. and extensible with D3.

Thank you. This looks the library I have been hunting for.

I've been using google charts for the past few months - I've found it extremely flexible and robust

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.

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.

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.

Both Chart.js and Highcharts are great, I like Chart.js, Nevertheless, Highcharts has more features and you can rely on a huge community

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

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.

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

That's pretty cool.

This.

For custom stuff I use D3, but for the "standard"-charts I use Highcharts.

Edit: Seems like Chartjs is MIT, Highcharts is only free for non-commercial.

On the custom side, d3.js has more chart types currently supported, but we've added more with this release and made extending / creating new chart types 100x easier. Previously custom work was much easier with d3, but the gap is now significantly reduced.

Can you expand on this a bit? From skimming the documentation this still seems firmly in the camp of a few charts with a lot of options, as opposed to d3's do what you wish model.

There is a ton of documentation yet, but here's a link to what there is: http://www.chartjs.org/docs/#advanced-usage-writing-new-char...

It certainly isn't to the d3 level yet, but almost everything is exposed and extensible with the new API so you can create most any chart you can think of.

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.

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

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

screenshot: http://i.imgur.com/so0iHU3.png

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.

Glad you've had a good experience @devbug

- 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

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.

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.

We don't have any way of generating histograms. We could easily plot them if you already have the data

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

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

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?

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

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.

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

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.

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

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.

That's a great idea

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!

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?

Any examples or documentation on the new Bubble Chart type?

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

Congratulation, Chart.js!

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

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

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.

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

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

duplicate of https://news.ycombinator.com/item?id=11561514

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

Where are the demos!

There are mini demos on the documentation page: http://www.chartjs.org/docs/

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

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

The new site looks cool and the default theme is nice. I selected 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.

Reply on news.ycombinator.com