Comparison between d3.js and chart.js (only for charts)
UPDATED 2016
The general rule of thumb is:
d3.js - great for interactive visualizations
chart.js - great for quick and simple
A few other charting libraries are on the rise, so keep testing and don't forget to contribute to the open source!
d3.js is not a "charting" library. It is a library for creating and manipulating SVG/HTML. It provides tools to help you visualize and manipulate your data. While you can use it to create conventional charts (bar, line, pie, etc...) it's capable of so much more. Of course with this "capable of so much" comes a steeper learning curve. There are a lot of conventional charting libraries built on top of d3.js - nvd3.js, dimple.js, dc.js if you want to go that route.
I'm not familiar with Chart.js but a quick look at the website tells me it's more of a run of the mill charting library. It supports 6 basic chart types and you aren't ever going to do stuff like this with it. But the API looks straightforward and I'm sure it's easy to use.
Other than that the most obvious distinction between the two is that Chart.js is canvas based, while d3.js is mainly about SVG. (Now I say mainly because d3.js can manipulate all types of HTML elements so you could even use it to help you draw on a canvas.) In general canvas will out perform SVG for a large number of elements (I'm talking very large - thousands of points, lines, etc...). SVG, on the other hand, is easier to manipulate and interact with. With SVG each point, line, etc becomes part of the DOM - you want that point green now, just change it. With canvas its a static drawing that was to be redrawn to make any change - of course it draws so fast you'll usually never notice. Here's some good reading from Microsoft.
Since I am trying to find a fast charting library to show charts on mobile devices, performance was important for me. It also had to have a licence that makes it possible to use commercially. I compared:
- c3, which is based on d3 and therefore uses SVG
- chart.js which is using canvas
The charts are loaded inside a WebView component inside a native app and all data (including the JS library) is local, so no slow down due to http requests. To maximize performance even more, I additionally put everything inside one single file.
I loaded 4 charts (line, bar, pie, line/bar combo) with together around 500 datapoints.
My time measuring exluded the actual loading of the html page. I measured form the moment I started using the charting library code until the end of rendering. All chart animation was turned off.
C3 took around 1500-1800 ms on modern Android and IPhone devices. iPhone performed around 100ms better than Android.
Chart.js took around 400-800ms. Android performed around 300ms better than iPhone.
No surprise, the SVG is slower. Depending on your use case, maybe too slow.
On a desktop computer rendering in c3 was around 150-200ms and charts.js around 80-100ms. Running the same test in Android and iPhone emulator had the same result as on desktop. So the slow down on mobile devices is definitely due to hardware/processing limits.
Hope that helps