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 :)
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).
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!
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.
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.
>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...
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
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.
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 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.
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.
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.
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.
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.
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.
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!
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.
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]?
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?
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.
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.
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.
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?
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
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.
- 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!