Compare the Best Javascript Chart Libraries
Chart.js, Highcharts, C3, NVD3, Plotly.js, Chartist, Victory
Read the original article on Sicara’s blog here.
In this article, I provide a decision tree to quickly decide which open source javascript charting library is right for your project. You can use any framework like React, Angular, AngularJS, VueJS or just use vanilla javascript. Links to the graph libraries for each framework are provided below.
I purposely exclude D3.js among the chart libraries. D3 is an awesome javascript library, but it has no “ready to ship” charts and graphs. If you want to learn about D3 you can read my article A starting point on using D3 with React. I will however list NVD3 which is a chart library built on top of D3.
Edit: this post has been updated since its first publication. Last update: 09/11/2017
Table of content
- The most used javascript chart libraries
- Criteria to choose your javascript charting library
- How to choose your javascript charting library — Read only the decision tree if you want to choose quickly
- Libraries links and code examples
The most used javascript chart libraries
I reviewed all the libraries listed in the aforementioned blog post. This post comes on the first page if you google ‘best javascript chart libraries’. I used this tool to get the following graph. It represents the number of downloads per day of each library through npm (the weekends were removed).
Number of downloads with npm from 01/01/2017 to 08/07/2017 (determined from here):
In this article I focus on these seven libraries.
An important thing to know, Victory is a chart library usable only with React JS. The other libraries can be used with any front javascript framework.
Criteria to choose your javascript charting library
It is important to understand what your project needs are and how they will evolve. This way you will save precious time by working with the right libraries from the start.
There are many elements to consider that can be equally important:
- License used by the libraries
- The library enrichment and maintenance over time. This can be assessed through the libraries’ Github repository popularity and activity.
- The visualization provided (2D, 3D, map, scientific, financial, and statistical charting)
- The customization options on your charts (titles, legends, zoom, tooltip, responsiveness)
- Graph design is also important. But I believe it is mostly a matter personal taste. Therefore it will not be extensively reviewed. You can still find an example of how the bar charts look a the end of the article.
Other criteria that are not (or partially) reviewed in this article: browsers compatibility and animation options.
Once you know what matters for your project, the next parts of the article will help you find the right library.
How to choose your javascript charting library
I have summed up in the decision tree below the most distinguishing features. If you don’t have time to read the full article, read this tree only and skip to the libraries links. These features are based on the criteria reviewed in this article. Use it to choose the right javascript charting library for your project.
Licenses info
Except for Highcharts, all these libraries are either under MIT or Apache license. This means they can be used for free. For more details about these licenses you can read this article.
You can also use Highcharts for free for non commercial purposes. Otherwise you need to buy a license.
Github repositories activity and popularity
I asked the CTO of a data visualization company what was the first thing he checked to choose the right JS charting library. His answer was: the activity and popularity of the Github repository. This is important because it gives some guarantees that the library will be:
- maintained over time
- enhanced with new features
I summed up the important elements to look at in order to choose a library. I coloured the cells from good (green) to bad (red).
Here is what we learn:
- Unsurprisingly, all of these libraries have overall good Github statistics. We can expect them to be maintained over time.
- Highcharts and Plotly.js are under heavy developments since a few years. This means we can expect new features delivered regularly with both of these libraries. Chartist seems to be on a quiet period with very few commits on the last months.
Keep in mind, this data will not be updated. I strongly encourages you to go check how it has evolved.
Provided graphs and charts
I reviewed the presence of 7 types of visualizations:
- Basic: line, bar, column, scatter plot, bubble, donut / pie, and area charts
- Scientific: contour plot, heat map, ternary plot, polar graph, carpet plot, and parallel coordinates plot
- Financial: time series, candlesticks
- Statistical: error bars, box plots, 2D density plots, tree map
- 3D: point cloud, line, ribbon, surface, and mesh plots
- Map: choropleth maps, scatter plot on maps, bubble maps, line on maps
I know you can fit other charts on these six types. And I may have missed some other important visualizations. However, I believe that these types of graphs satisfy most of the projects needs.
What does not appear on the table above:
- Plotly and Highcharts provide many other chart types
Design and customization options
Comparing design and customization options is tricky. Each library provides custom options and it is hard to compare them. I decided to make it simple and compare the presence of the following options:
- presence of zoom and tooltip
- possibility to add a title and a legend
- responsiveness of the graphs
Finally you can get a feel of the design of each library by browsing the examples below. Whenever possible I tried to mix a line chart with a bar chart. I also tried to include all the listed options above, whenever available.
If you are a developer, you might also want to take a look at the code. Code readability is not the first criteria to choose your chart visualization library. But it might help you choose between them if you are hesitating.
For non techies just click on Result :).
Libraries links and code examples
Chart.js
Highcharts
C3
- C3JS for React
- There is no current library for C3JS on Angular but you can read this post on Google groups
- C3JS for AngularJS
- C3JS for VueJS
NVD3
You cannot add titles, but you can use raw D3.js for that. There is no support for zooming as well.
Plotly.js
- Plotly.js for React
- Plotly.js does not seem to work with Angular, you can follow the Github issue here
- Plotly.js for AngularJS
- Plotly.js seems to work out of the box on Vue.js. You can see this demo and the corresponding Github project
Chartist
No native support to add a title, zoom, tooltips or a legend. There are available plugins that provide zooming and tooltips options. Unable to mix two types of charts.
Chartist provides special support to add custom animations.
Victory
As said, Victory only works on React.
Conclusion
Some of you might be tempted to think: the more options and provided graphs the better. Then why not choose Plotly for all the projects since it offers the largest diversity of charts? This is not the right approach. If your needs are fulfilled by a simple lightweight library like Chartist, then go for it. Keep it simple. It will save you time by not diving into unnecessary options. Moreover your application would load faster with lighter dependencies. Once again it all depends on your project needs and how you think they will evolve. If you’re a warrior or if you have very specific needs, you can build your own custom charts and graphs using D3. Happy charting!
Did you like this article? Don’t forget to hit the Follow button!
