Given the overabundance of tools available to a Javascript developer in 2016, finding and choosing the right one is often a challenge.
Especially when it comes to visualising data, either drawing animated charts or implementing custom interactive infographics, the choice becomes harder since there are a lot of tools out there: Wikipedia’s “Comparison of Javascript charting frameworks” currently lists 44 different libraries, jsgraphs.com currenty stands at 72(!) different charting tools and – to make matters worse – the Google search result for “best javascript charting libraries” over-delivers with approximately 786K results, out of which the first 20 results are all links with titles like “{{integer in multiples of 5}} best javascript libraries”.
Naturally, most of the relevant Stackoverflow questions of the”what is the best tool” nature are “closed as not constructive”.
In this article I aim to help with the above challenge by means of a slightly unconventional approach: In my research I tried to quantify the merits of the most popular libraries, given a series of “developer-friendly” metrics.
Sounds weird and subjective? It is. Read on.
Step 1: Understanding declarative vs imperative approaches
Before we start comparing, it is essential to understand how almost all of the available libraries can be split into two distinct categories based on their approach. Let us borrow from classical computer science and use the “declarative vs imperative” paradigm comparison for this.
The declarative approach
The majority of JS charting libraries follow the declarative paradigm: You write code that describes what you want to end up with, and the library ensures it happens dealing with all the minutiae.
FusionCharts, Highcharts, amCharts, Chart.js etc. all follow this approach: You pick a chart type (column, bar, pie), you specify a configuration object and the library outputs a nice looking interactive chart based on your wishes.
The imperative approach
On the other hand, tools like D3.js, Paper.js or Snap.svg follow the imperative paradigm. They provide you with helper methods which you then need to use to write code that visualises your data step-by-step.
For example, to create a bar chart with D3.js you will need to initialise the canvas, calculate where to draw the axis, draw the axis, calculate where to draw the columns, draw the columns, the legend, the point data, add the events etc.
It does feel a little counter-intuitive to choose any tool that follows the imperative approach, until one sees the amazing work implemented by Mike Bostock (creator of D3.js) for the New York Times, with animated interactive infographics such as the 2012 “512 Paths to the White house” to understand how powerful a library like D3.js can be.
In the next step I made an effort to establish “winners” in each of those two categories.
Step 2: Quantify the popularity of each tool
2.1 Mentions in Google articles
One needs to start from somewhere so my first step was to revisit the “best javascript charting libraries” Google search, filter out to show results only from the past year, open the first 20 hits (first two pages) and note down which libraries were mentioned.
95 libraries in total – see the “Mentions” tab of this Google sheet for a full reference (it’s the first tab – and yes, there exists a library called “Aristocharts”. Seriously).
I then filtered out the list to include only the libraries with at least 4 hits:
Some surprises here already. No amCharts? No mention at all of Paper.js or Snap.svg? Interestingly, the fact that N3-charts “made the cut” here can be construed I believe as a testament to the popularity of Angular.js.
What comes as no surprise is the popularity of D3.js. It is also the only library in this list that follows the “imperative” paradigm making D3.js the clear choice when it comes to that approach. I marked D3.js as the “winner” in the imperative category, filtered it out and continued.
2.2 Licensing
Next step was to establish the license of each library. Many developers are partial to tools that are either open source or come with really relaxed licensing.
Some reading is involved if one wants to make sense of Google custom license for their “Charts” library (it’s free with a lot of caveats). Interestingly ZingChart offers a free (albeit watermarked) version of its library.
Please note that personal bias prevented me from filtering out the commercial offerings at this stage. I’ve used both Highcharts and FusionCharts in the past to great success and as a result I opted to not judge based on price – until I had all the metrics that is.
2.3 Github stars and watchers
Does the library have a repo in Github? And if yes, how many people are watching, how many have starred it? I intentionally steered clear of other Github measurements such as number of contributions or PRs since each repo has owners and each owner has his / her own personal approach towards how “open” they are to contributions.
On the other hand, a project’s star rating is a clear indication of how many developers (rather than simply users) “like” it. The “Watch” metric also tells us the number of devs who actively want to be notified when new things happen in the project.
Google Charts had a few github repos but they were for projects that wrap / package their “Google Charts” project, e.g. GoogleWebComponents.
Two things stood out for me in the table above. The massive community support for ChartJS – almost the same number of stars as Backbone.JS (!) – as well as the number of people who are watching Chart.js.
What is also surprising is that out of the three commercial offerings, Highcharts number of stars is orders of magnitude higher than the rest.
2.4 Stackoverflow tagged questions
Another metric that can tell us how many people are using a library is to see the number of questions that are “tagged” in stackoverflow for a specific library.
This is not foolproof – one might argue that extremely well designed and structured libraries will be so intuitive in their use that people will not be asking questions about them – but my personal experience has shown that even the simplest of tools generate a lot of questions when used by a lot of people.
Is Highcharts the most difficult library of all? Or is it perhaps the most widely-used one? Perhaps its developers are extremely responsive to the questions of the community? We cannot answer this with 100% confidence. What these counts show however, is that highcharts has more tagged questions in Stackoverflow than all rest of the libraries combined.
Choosing the winners
Since I’ve already opted for a (completely) subjective approach, what better way to pick a winner by simply…. adding everything up.
Here are the top 5 libraries sorted by “Score”, i.e. the sum of github stars, github watchers and stackoverflow tagged questions:
Full data available on the “Final results” tab of this Google sheet.
Declarative approach – Open source – Chart.js
If the Github stars are anything to judge by, there is a lot of developer enthusiasm for what Chart.js offers.
The documentation is clear and concise – http://www.chartjs.org/docs/ – with several inline examples, browser support is solid (as long as <canvas> is supported chart.js will work – this means no IE8 and some inconsistencies on <= IE 10) and the 8 chart types it offers should be more than enough for most needs.
Declarative approach – Commercial – Highcharts
I’m an avid user of Highcharts and I was pleasantly surprised to see it “rising” in the ranks of my little quantitative experiment. The massive number of stackoverflow questions clearly signifies that despite its commercial nature, the community uses it… a lot. The high number of github stars – (I repeat: for a commercial project) – is also quite indicative of the “developer feelings” for Highcharts.
The documentation is stellar (with a really powerful “Demo” showcase where every single example is linked to a working JSFiddle), the API browser / reference is a great resource and browser support is not an issue since Highcharts auto-falls back to VML rendering for older IE browsers.
Check out this JSFiddle to see how easy it is to visualise a table like the one shown in “Choosing the winners” above:
Imperative approach – Open source – D3.js
The central principle of D3 is to enable developers to programmatically construct SVG objects and render them as they see fit. As long as you can visualise it, D3.js can help you (a) draw it, (b) make it interactive and (c) animate it.
D3.js is the tool to use when a charting library simply won’t cut it. And the community demonstrates this very clearly:
Github stars – 54848
Github watchers – 2653
Stackoverflow tagged questions – 22036
If I had to score this the same way I scored the charting libraries, then D3 leaves everyone behind by a factor of 2 with a score of 79537.
