20 ms·
Chart.js 2.0 Released
- devbug 11y agoI'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 11y agoGlad you've had a good experience @devbug
- derekperkins 11y agoOne 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!
- derekperkins 11y agoOne 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!
- viiralvx 11y agoThanks for the hard work on this library! Such a great and simple library to use!
- mikerg87 11y agoI 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.
- slang800 11y agoduplicate of https://news.ycombinator.com/item?id=11561514 https://news.ycombinator.com/item?id=11561514
- dang 11y agoThanks. We'll merge that thread with this one.
- acbart 11y agoAny 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.
- etimberg 11y agoWe don't have any way of generating histograms. We could easily plot them if you already have the data
- jonahx 11y agoAssuming 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.
- deleted 11y ago[deleted]
- dsjoerg 11y agoHi, this looks pretty. I've been a happy highcharts user for several years; can you summarize what's good/better/different about chartjs?
- derekperkins 11y ago1. 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 11y agoFWIW, 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-performance-boost http://www.highcharts.com/articles/2-news/175-highcharts-per...
- derekperkins 11y agoThat's pretty cool.
- k__ 11y agoThis. 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.
- derekperkins 11y agoOn 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.
- kcollignon 11y agoAny examples or documentation on the new Bubble Chart type?
- derekperkins 11y agoWe 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/bubble.html https://github.com/chartjs/Chart.js/blob/master/samples/bubb...
- grouma 11y agoOn 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 11y agofwiw, 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.
- angilly 11y agoYes!!! I've been waiting for this to be ready for a while. Psyched to integrated it into https://ChartURL.com https://ChartURL.com !
- _RPM 11y agoRemember when HighCharts.js was the only good charting library? It also that commercial license restriction.
- psisous 11y agoWow this looks great! thanks for the hard works guys, definitely going to try and contribute.
- wilsonfiifi 11y agoWell 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 11y agoI 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
- anc84 11y agoWhere are the demos!
- psisous 11y agoThere 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 11y agoHow 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.
- JohnKacz 11y agoAwesome. 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.
- dmeagor 11y agoWe'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 11y agoHey @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 11y agoReally 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.
- museagle 11y agoBoth Chart.js and Highcharts are great, I like Chart.js, Nevertheless, Highcharts has more features and you can rely on a huge community
- lossolo 11y agoI 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 11y agoI haven't used this but found this chart lib based on D3.js called C3.js. http://c3js.org/ http://c3js.org/
- acomjean 11y agoI'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.
- welder 11y agohttps://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.
- jweir 11y agoThank you. This looks the library I have been hunting for.
- RockyMcNuts 11y agoI think https://plot.ly/ 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.
- nathancahill 11y agoI 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.
- siraris 11y agoWhat's the upside of this over HighCharts which is an already mature product?
- hakanito 11y agoChart.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 11y agoYou 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
- 0x54MUR41 11y agoCongratulation, Chart.js! I remember my past time working on Ionic mobile development using chart.js to show graph of monthly incomes.
- piratebroadcast 11y agoCan 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.
- derekperkins 11y agoWe'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 https://github.com/chartjs/Chart.js/tree/master/samples
- code_research 11y agoThis 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 11y agoI 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?
- kumar1981 11y agoThe 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.
- alex_g 11y agoExcited to see this! The site hadnt been usable for quite some time now.
- revicon 11y agoFYI, 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
- z3t4 11y agoWhat 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 11y agoThat's a great idea
- mailmanstudio 11y ago2.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.