Best JavaScript Data Visualization Libraries For 2019

・15 min read
Best JavaScript Data Visualization Libraries For 2019

When creating a webpage you will most definitely reach the point where you will need to present some information for the user. It is important to arrange the data in a clear way, for example, by using interactive charts on your website.

There are many JavaScript data visualization libraries that can help you display data and in this post, I picked a few of them that I found worth noting, and will note their main strengths and weaknesses, so hopefully, it will help you to find the best one for you.

Table of Contents
NameD3jsRechartsHighChartsFusionChartsamCharts
Open Sourceyesyesyesyesyes
Price per developerfreefreefree for non commercial useCan be used for free (the link to FusionChart will be present in the bottom)Can be used for free (the AMCharts logo will be present in the corner)
Bar, line, scatter, pie chartsyesyesyesyesyes
Supported frameworksanyReactAngular, React, EmberAngular, React, Emberany

D3js

Pricing

Free 🎉

Main premises

D3js, stands for Data Driven Documents, and is a powerful toolkit for creating and manipulating SVG elements. It can be used to visualize even the fanciest data structures and relations. D3 is a JavaScript library that gives you the low-level tools for creating any visualization you can imagine, which means that it can be used not only for creating charts. D3 owes its immense popularity to the fact that some other charting libraries use it under the hood and their usages feed the D3.

How to create charts

With D3 you need to imperatively create charts line by line, shape by shape.

Documentation

D3js is well-documented and the English version of the documentation is also available in 11 unofficial translations. Also, there are multiple examples of how to use D3 on https://bl.ocks.org/ and you might find the one matching or similar to your case.

Usability for simple cases

Because of the imperative style of D3 you need to create simple charts the same way as the custom ones. So unless you find a ready example in https://bl.ocks.org/ then you’ll have to start from scratch. In this case, D3 is not the most optimal solution especially for developers who are not familiar with it as it might take some time to implement even a simple case.

Usability for custom cases

In this field, D3 shines the brightest, especially in the hands of an experienced developer. With the low-level tools, he/she is able to implement even the craziest requirements of the clients.

Integrations with frontend frameworks

D3 is framework agnostic so it can be used with any of them.

Popularity

D3.js is used by the New York Times and is probably the most popular among data visualization libraries. However, some claim that it is not a data visualization library at all, as it can be used for other cases presented on https://bl.ocks.org/.

Community and support

There is a ton of resources and examples to learn from. Here is a curated list of the resources available https://gist.github.com/revolunet/8213461

Modularity

D3 in its 4th version supports three shaking, which means the functions that you are not using will be removed from the production build

Extendability

D3 allows extending its functionalities by custom plugins. There are lots of already existing ones https://github.com/d3/d3/wiki/Plugins

Pros

  • Open-source
  • Allows animations, data analysis, geo
  • it's a toolkit to visualize even the fanciest/custom charts.
  • compatible with any framework (Vanilla JS)

Cons

  • not suitable for simple use cases
  • Hard to navigate documentation
  • Learning curve
  • API exposes direct access to the DOM

Recharts

Pricing

Free 🎉

Main premises

Recharts has a more declarative approach to creating charts. It wraps D3 in React components and allows to compose your charts just by using those, combining them and configuring with props. Its name stands for redefined (way of creating) charts, which it does by allowing to create charts in a declarative way. Recharts is a React wrapper on D3 which gives the user ready to use components for different types of charts.

How to create charts

Charts can be created just by using and configuring components provided by Recharts, so developers familiar with React should have no problem to learn how to use this library.

Documentation

Recharts is well documented and has lots of examples get familiar with its api and some common use cases.

Usability for simple cases

Implementing some standard chart is a matter of importing a component from Recharts and configuring it a little bit, plus passing the data. Also, as the documentation is full of examples, with some luck you might find a ready to use code for your chart.

Usability for custom cases

Recharts also offers custom shapes and straight out svg paths which you might use in situations when you have to implement really untypical charts. So when picking Recharts you don't have to worry that it will not be able to handle some custom chart needs.

Integrations with frontend frameworks

By its nature, Recharts are usable only in React projects.

Popularity

Having almost 12k stars on GitHub and steadily growing 200k downloads per week, Recharts seem to be a mature library.

Community and support

As it’s a free, open source library it offers no reliable support waiting for your call/ticket, so you must hope that the community or lib maintainers answer your question in time. This is the weakest point of Recharts, as even now there are hundreds of open issues on GitHub, and many of them have no responses.

Modularity

It is a modular JS visualization library, so you can include only the components that you really use in your application. Also under the hood, it uses only the D3 modules that it needs.

Extendability

With the use of custom shapes, you can create your chart from scratch or extend the existing ones, but Recharts does not support plugins on itself.

Pros

  • Declarative style of creating charts
  • Allows creating custom shapes and svg paths
  • Good documentation with example implementations
  • Very popular

Cons

  • Lots of open issues on GitHub (maintainers seem not to catch up with answering/closing)
  • Only usable in React projects

HighCharts

Pricing

It’s free for non-commercial use and for commercial purposes it starts from $430 without premium support and $595 with the premium support function.

Main premises

HighCharts provides a wide array of different charts and each of them can be customized using dozens of configuration options. On top of multiple chart types, Highcharts also have a few addons like Highstock and Highmaps to handle specific needs for visualising stock data and map data. Highcharts also offers a few visual themes out of the box, but you can extend them and create your own. The theme is applied to all charts so keeping the consistent look is simple.

How to create charts

Charts are created by passing the configuration to the Highcharts module. This configurable approach allows even people with little programming skills to configure their charts.

Documentation

Highcharts provide documentation for every configuration option it has, all of that with editable examples.

Usability for simple cases

Creating some standard charts might be as simple as picking the right chart type, providing some minimal configuration and data.

Usability for custom cases

If the Highcharts configuration does not support your case, you can create plugin extending or adding the new behaviour to the chart. Integrations with frontend frameworks Highcharts is framework agnostic and can be used for every frontend app, however, it also provides wrappers for major frameworks, React, Angular, Ember and a few others.

Popularity

One of the most popular data visualization libraries for charting among the paid ones.

Community and support

Premium support is available for users with certain pricing plans.

Modularity

As for the moment you have to import the whole Highcharts even if you use only a fraction of its features. Some modularity can be achieved with workarounds or custom tools provided by Highcharts. But they are not aligned with the industry standards and require getting familiar with them, which is not the best practice.

Extendability

One of the big upsides of Highcharts is its customization. You can create your own plugins and share them across multiple projects. Also you can extend the current modules with new functionalities and bind to their events.

Pros

  • Even non-technical people can configure their own charts
  • Extensive documentation with examples
  • Allows creating plugins
  • Can define themes so your charts look consistent across the project
  • Lots of payment plans to choose from, so you only pay for what you need

Cons

  • With a number of payment plans, it might be problematic to decide which is the best for your case
  • Configuration options are very broad but limited and not everything can be implemented
  • Need to get familiar with a lot of configuration options in order to be effective and implement more advanced charts

FusionCharts

Pricing

It is free if you accept to have a link to their homepage on every chart. So you can check how it works for you before pulling out the cash. Its paid plans start at almost $497 for a single developer projects.

Main premises

FusionCharts are JavaScript charts for web and mobile dashboards, a ready-to-use code for all variations of popular charts. FusionCharts consists of three separate products. FusionCharts Suite XT which is the main library for creating all kinds of charts and maps. FusionTime used for visualising time series with the high performance needed when you have millions of datapoints. The creators promise that all charts work on out of the box on tablets and mobile devices. The last product is FusionExport which allows generating and export dashboards as PDF ready to be used in emails or reports.

How to create charts

Similarly to Highcharts, the charts are created declaratively by passing the chart configuration and the library takes care of the rest. So FusionCharts share the up and downsides with the previous library for this aspect.

Documentation

Documentation of the configuration options is divided by the aspect of the chart it handles, so it’s easy to browse and find the option you need, especially if you are not that familiar with the api of FusionCharts yet. On top of that, it also has tutorials and guides on how to configure every aspect of the chart, each consisting of editable examples in jsfiddle.

Usability for simple cases

For every chart type supported by FC it has some standard configuration setup in the documentation so you can just start with it, pluck your data and have a working base for further customization.

Usability for custom cases

If your needs exceed what is configurable, then you have to revert to other more flexible charting solution, as there is no clear way to add custom elements to the chart.

Integrations with frontend frameworks

FusionCharts provides additional integrations for the major frontend frameworks.

Popularity

Fusion charts is used also on the backend in various different languages (Java, PHP, Ruby) so its popularity exceeds usage via the npm. Worth noting is, that Google in Google Docs uses Fusion charts in its chart widget.

Community and support

As a paid solution FusionCharts provides 24x7 dedicated customer support. For higher plans they event offer support with project implementation and dashboard consultation.

Modularity

Fusion charts does not provide the mechanism to decrease its bundle size.

Extendability

FusionCharts does not seem to support extending its behaviour.

Pros

  • Wide variety of chart types
  • Extensive documentation

Cons

  • Little customization options
  • Library size

amCharts

Pricing

Free if you accept to have a amCharts logo on the corner of your charts. Otherwise you have few simple pricing options to pick from. They do not depend on the number of developers, but only of the type of the project you are working on.

Main premises

amCharts stands out from the competition with its beautiful design and recently added support for touch devices, making its charts pleasing to use and explore on mobile devices. It was designed to feel right straight out-of-the-box.

How to create charts

Charts in amCharts are created by passing configuration and data to the chart object. The library is handling all the other low level rendering.

Documentation

amCharts has lots of ready to use demos together with implementations. But there are also regular docs explaining all chart types as well, as specific elements of the api.

Usability for simple cases

For standard charts you might find ready to use example in the demos section or use it as a base for further configuration.

Usability for custom cases

Huge configuration options should cover most charting needs, but if it’s not the case you could use plugins to build on top of the existing behaviour.

Integrations with frontend frameworks

amCharts is framework agnostic and it can be used with all frontend frameworks as well as on vanilla JS projects. In the documentation amCharts provide examples how to set it up with few major frameworks.

Popularity

Looking at npm trends amCharts does not seem to be very popular, but it is used by companies like Apple, NASA, Amazon and other high profile companies. This might suggest that it’s a product used mainly by corporations.

Community and support

As a paid library amCharts offers customer support, however there is additional service amPlus which gives access to priority customer service which according to the amCharts website has 3 times shorter response time than the regular support. Free users need to search for help on StackOverflow, or Github issues.

Modularity

As different charts and functions are imported separately, with properly setup build tooling, you should be able to perform optimization of the application bundle size by omitting not used functionalities.

Extendability

Since the version 4.2.2 it’s possible to extend functionality of amCharts via plugins. As for July 2019 the documentation for how to use and implement the plugins is still in progress. Until it’s finished if you would like to add your plugin, you have to reverse engineer the few existing ones available on the official repo.

Pros

  • Used by giants like Apple, Amazon and NASA
  • Works with React, Angular, Vue, plain JavaScript, TypeScript
  • Beautiful design

Cons

  • Lacks features like vertical zoom
  • Can be expensive
  • Can be laggy

Library Popularity Statistics

An important factor you may consider when choosing a visualization library is its overall popularity among users. As you can see on the table below, d3 is the leader when it comes to the total number of downloads in the past 6 months. What is more, it is almost as light as HighCharts and the number of reported issues, considering the number of users, is little to none.

D3jsRechartsHighChartsFusionChartsamCharts
Stars~85k~12k~150k~20~350
Issues953935259
Size78KB118KB77KB379KBunknown

Summary

Taking everything into consideration, you should be able to find a data visualization library best suited for you. Depending on your needs, requirements and framework you are working with the choice will vary. Each the libraries will have its advantages and disadvantages, so it is worth to compare them before deciding on one.

D3.js is a good option if you want to have something extra fancy and, most importantly, you know someone who knows D3 well.

On the other hand, Recharts will be a good option for those wanting to make use of D3 power, but without messing around with low-level tools, however, you have to be aware of the lack of support.

HighCharts is a safe option if one wants to use a very popular and mature too. It allows chart configuration instead of creating them manually.

FusionCharts and amCharts both offer similar features and differ mostly in visuals and pricing, so that should be your decision maker.

No matter which one you will pick, remember to present the data in a comprehensible way, which is relevant to users.

If you are still confused and need some help, don't hesitate to reach out to our front-end team.

Related articles