Edit: this post has been updated since its first publication. Last update: 09/11/2017
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.
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.
You can also use Highcharts for free for non commercial purposes. Otherwise you need to buy a license.
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.
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
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 :).
There is no current library for C3JS on Angular but you can read this post on Google groups
You cannot add titles, but you can use raw D3.js for that. There is no support for zooming as well.
NVD3 Basic Example
Plotly.js Basic Example
Plotly.js does not seem to work with Angular, you can follow the Github issue here
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.
As said, Victory only works on React.
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!
Few-Shot Image Classification with Meta-Learning
Here is how you can teach your model to learn quickly from a few examples.
How to Build a Serverless REST API in 15 Minutes on AWS
Use AWS Lambda to build a Serverless REST API, storing data in S3 and querying it with Athena.
Keras Tutorial: Content Based Image Retrieval Using a Denoising Autoencoder
How to find similar images thanks to Convolutional Denoising Autoencoder.