June 27, 2017

Compare the Best Javascript Chart Libraries

Chart.js, Highcharts, C3, NVD3, Plotly.js, Chartist, Victory
1 d7dvz2Zh28hJbzYXmKsCcQ

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 ReactAngularAngularJSVueJS 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

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).

1 M6ETZ58B2Sai4bzYhOh2Gg

Number of downloads with npm from 01/01/2017 to 08/07/2017 (determined from here):

1 JFiLt9pM4KG5Jiiz35PcBw

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 linksThese features are based on the criteria reviewed in this article. Use it to choose the right javascript charting library for your project.

1 bR2-wCe4Zh3LbZrnScV7dg

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).

Github repositories statistics — Friday, 8th September 2017
Github repositories activities — Friday, 8th September 2017

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.

1 8-EXtbCRs82PIJ ledUEgQ

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

1 TvjYpcdWW8x5Lb85PF8cVg

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

NVD3

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

Plotly.js Basic Example

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!

Thanks to Flavian Hautbois, Antoine Toubhans, Adrien Lina, and Reda Boumahdi. 

museum watching

Few-Shot Image Classification with Meta-Learning

Here is how you can teach your model to learn quickly from a few examples.

cloud

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.

graph

Keras Tutorial: Content Based Image Retrieval Using a Denoising Autoencoder

How to find similar images thanks to Convolutional Denoising Autoencoder.