This website uses cookies for analytics and to improve provided services. By choosing I Accept, you consent to our use of them and other tracking technologies according to our Privacy Policy
14_java

14 Popular JavaScript Libraries for Data Visualization in 2019

To what extent does your app rely on data? It probably does in some way. Even if the app is not exactly business-oriented, you’d probably need data for the admin panel, the dashboard, performance tracking, and similar analytics features that users love so much.

Visualizing data inside those apps and presenting them to end users is a great responsibility. Companies build strategies around the charts, number, and tables they’re presented with, and often use them to choose whether to pursue business opportunities. Therefore, choosing the right tools can in some cases be the difference between making it and breaking it.

For a JS developer, the ability to visualize data is just as valuable as making interactive Web pages. Especially that the two often go in pairs. As JavaScript continues to gain popularity in data visualization realm, the market is flushed with even new libraries with which to create beautiful charts for the Web.

For our internal purposes, we needed to better understand when to use them and why. We picked fourteen JavaScript libraries for data visualization that are currently the most popular or interesting for building digital products and started a little study to see which one would work best for our projects. We had a number of factors to consider here:

With this research we wanted to understand which one would work best for our projects? And there are a number of factors to consider here:

  • What kind of charts do I want to build? Pie charts, maps, lines, bars?
  • Some libraries support only a handful of types. Make sure you know which ones you need first.
  • How large is the dataset?
  • Libraries based on SVG are usually better for smaller to medium datasets, as each element is a unique node and exists in the DOM tree. This also means that they offer a lot more flexibility by allowing direct access. Although you could make them work with large data sets with the help of some data aggregation algorithms, smart memory management, and other fancy tricks, going with Canvas-based tools for large datasets is the more reliable option here. Canvas is really fast.
  • Is the app used for Web, mobile, or both?
  • Some libraries are better at responsiveness, while a few others have their own React Native versions like Victory.
  • What’s the browser support for a given library?
    • Check your browser market share to figure this out.
  • Which JavaScript framework do you use?
  • Make sure your data viz library will go well with it. Using React? Going with a React-specific library might be the better option than using wrappers.
  • What kind of customization of the look and feel do you need?
  • If you need some advanced animations, for example, you should take that into consideration, too. 

Note that in some cases, you may not need a data visualization library at all. Sometimes it’s a better idea to write one from scratch using vanilla JavaScript. While the initial overhead is significant (especially when it’s your first time), for projects with custom, tailored charts such a move might pay off in the future. Sometimes it’s better to keep your sanity and spend more resources on the developing part rather than trying to bend libraries to fit your particular needs. Although it may sound scary at first, with an SVG-oriented mindset and few hours to experiment—who knows, it might actually be fun!

If you are familiar with modern frontend frameworks, then Vue.js is especially great in this area and its reactiveness makes working with SVGs a breeze. Notice I’m talking strictly about SVG-based charting as it’s much easier to implement. HTML5 Canvas is simply a drawing surface for a bitmap and it’s not aware of the objects drawn inside—they’re pixels, not actual DOM elements like they are in case of SVG. If you want to make it interactive, you will need to handle all the logic yourself. While Canvas-based approaches offer a performance edge with large datasets (1000+ elements) and careful manipulation, I wouldn’t recommend writing one from scratch—unless it’s a core feature of the product.

So when is it a good idea to use a library?

Either when you have an odd chart in the project, one that needs to be basic but good-looking, with all the bells and whistles (tooltips, legend, X/Y axis etc.) or when the application demands standardized, responsive, and elaborate charts, especially when there’s more than one type.

In the end, we use libraries to keep ourselves from from reinventing the wheel over and over again, and most of them have been around long enough to have factored in most use/edge cases. Oh, and they come with animations built in, too.

It’s impossible to try all of them out in real-life scenarios, but below you’ll find a list I’ve compiled based on my own and others’ observations. Keep in mind that before you dive into one library, it’s always a good idea to see how it will integrate into your project. In the end, the choice is yours—so here’s a list!

I wanted to say thank you to my colleague, Karolina Gawron, who helped me a lot with the research for this piece. Kudos! 

Free JavaScript Libraries for Data Visualization

If you’re not a large enterprise, open-source libraries offer more-than-enough options to choose from. If you have successfully answered the questions I mentioned above, you will probably find your perfect match fairly easily.

D3.js 

All charts in the Javascript dataviz library

 

D3 is one of the most popular JS libraries not just for data visualization, but also animations, data analysis, geo, and data utilities. It uses HTML, SVG, and CSS. It has a gigantic API and some say it’s not a data visualization library at all. Everything you can probably think of can be done with this library, but it comes with its downsides. It has a steep learning curve and the documentation is outdated and confusing to navigate.

Much of the API exposes direct access to the DOM, which might clash a little with how modern frontend frameworks like React or Vue work. There are ways to work around that, though. One involves so-called declarative data-driven documents (d4 in short), which suggests letting the framework manipulate the DOM and using D3 strictly for the data API. You can find more info and examples here.

Works with: anything

D3 GitHub
D3 gallery

Recharts

Graph - Recharts

 

A data viz library created for React users. Recharts uses D3 under the hood and exposes declarative components. It’s pretty light and renders SVG elements to create beautiful, interactive charts. It’s easy to use and the documentation is a blast. Charts are customizable and the library itself provides some nice examples. It delivers great performance for static charts and includes built-in general chart tools like legend tooltips and labels. It can be laggy when dealing with multiple animated charts on the same page and large datasets, but it will work for most use cases.

What’s a bit troubling is the high number of unsolved issues on GitHub. These issues may not be critical, but creators don’t seem to drop by to answer them too often. So if you get stuck, be prepared to dig deep into the library.

Works with: React

Recharts GitHub
Recharts examples

Victory

Graphs  - Victory

 

A set of modular charting components designed specifically for React and React Native. Victory does a good job providing fundamentals to create a chart—things like axes customization, labels, passing in different data sets for a single graph are all pretty straightforward, and tweaking styles and behaviour is easy and intuitive. It’s really effective and lets you build some nice-looking charts with minimal code. Definitely worth checking out for cross-platform apps.

Works with: React, React Native

Victory GitHub
Victory gallery

React-vis

Data vsualisation - React-vis

 

It’s a simple visualization library created by Uber, which allows you to create all the usual types of charts: bar charts, tree maps, line, area, and more. Its API is quite simple and offers a lot of flexibility. It’s light and the animations are simple but fluid. It also allows you to write custom charts based on existing elements.

Its minimalist styling, however, may not fit everyone’s tastes (but I personally like it!). Although there aren’t too many on react-vis out there, the documentation is straightforward and easy to read.

Works with: React

React-vis GitHub
React-vis examples

ApexCharts

Chart - ApexCharts

 

A rather neat library for SVG charts, comes with a Vue.js and React wrapper. Its charts look great on different devices, and the library allows for customization and comes with comprehensive documentation. It can be laggy with larger datasets, so make sure it’s exactly what you’re looking for. According to Juned Chhipa, the creator of ApexCharts, the library was created for easier zooming, panning, scrolling of data, placing informative annotations on charts, and more.

The library itself is new and there’s still a lot of room to grow, but if responsiveness and interactivity is especially important for you, it’s a nice-looking library worth giving a shot to!

Works with: React, Vue.js, plain JavaScript

ApexCharts GitHub
ApexCharts examples

Chart.js

 Chart - Chart.js

A very popular open-source library with more than 40k stars on GitHub. It’s lightweight and lets you build responsive chart using HTML5 Canvas elements. You can easily mix and match line and bar charts to combine different datasets, which is quite the awesome feature.

Chart.js offers you six different chart types by default, it supports responsiveness, and is beginner-friendly. It’s also my go-to library for very large datasets. Definitely one of the most interesting open-source libraries to check out.

Works with: React, Vue.js

Chart.js on GitHub
Chart.js examples

Echarts

Chart - Echarts

 

This library created by Baidu is super useful for data visualizations intended for the Web. It’s well-documented in English and works great with big datasets. It also supports both SVG and Canvas rendering.

Works with: anything

Echarts on GitHub
Echarts examples

Frappe Charts

 Frappe charts

 

A very simple library for charts with zero dependencies. It’s open-source, and with only seventeen contributors it’s one of the smallest libraries on the list.

Frappe Charts is a package inspired by GitHub-like visuals which supports line, bar, and other types of charts. You can also use it to create monthly heatmaps that you may recognize from GitHub Activity. If you’re looking for a minimal and lightweight package, this is the one!

Works with: anything

Frappe Charts GitHub
Frappe Charts website

Nivo

 Nivo chart

 

Nivo is a beautiful framework built on top of D3 and React, offering fourteen different types of components to present your data with. It was released in 2017, featured as product of the day on ProductHunt on August 20, 2017.

Nivo offers a lot of customization options and three rendering options: Canvas, SVG, and even API-based HTML. The documentation is exceptional and the demos are configurable and fun. It’s a high-level library and quite simple, but offers less potential for custom visualizations.

Works with: React

Nivo GitHub
Nivo website

Google Charts

Screen from Google Charts

 

An extremely popular Web service for charts that I simply couldn’t leave off the list. For many out there it’s the go-to JS library, as it provides multiple pre-built charts types, such as bar, line, area, calendar, geo charts, and many more. For me, however, the library feels like overkill in most cases and, frankly, I wouldn’t recommend using it.

It’s free, but not open-source (pretty much like every Google product). It’s not responsive by default, but you can make it resize charts with some code. There are different customization options, depending on the chart type, but it’s not exactly beginner-friendly. And you have to load it directly from a Google URL instead of an NPM package.

Works with anything

Google Charts website
Google Charts gallery

Commercial JS Charting Libraries

Some libraries offer free versions for personal use, but you need to pay to use them in commercial applications. All of the libraries listed below are commonly used by big corporations. Why? Because all of them are truly comprehensive, customizable, and offer a great customer support. If you’re an enterprise, you should check them out.

amCharts

Chart - amCharts

 

One of the hottest charting libraries out there. Its beautiful design really sets it apart from the competition. amCharts lists Apple, Amazon, NASA, and many other prominent names as their clients, which is pretty impressive to be honest.

amCharts is a commercial tool and their pricing starts at $180 per single website license. In return for a fixed fee, you get all types of charts you’d need, including geographical maps and great customer support, with response times averaging less than 3 hours. It sounds like a good solution for large companies.

Works with: Angular, React, Vue.js, plain JS apps, TypeScript

amCharts GitHub
amCharts website

CanvasJS

Charts - CanvasJS

 

Another commercial tool offering beautiful charts across different devices and browsers. It lacks some chart types, such as the network chart, sparkline, or gauge charts for example. Plus, its learning curve is quite steep.

On the other hand, it’s very fast, working smoothly even with as many as 100k+ data points, and provides four default themes that should be a good fit for most scenarios. Their client list is quite impressive, too: Apple, Bosch, Siemens, HP, Microsoft, and many more.

Works with: Angular, React, jQuery, plain JavaScript

CanvasJS website
CanvasJS gallery

Highcharts

Charts - Highcharts

 

A JS library released in 2009 JS, based on SVG with fallbacks to VML and Canvas for old browsers. It offers a whole ecosystem of different project templates. Highcharts is compatible with older browsers, too, including Internet Explorer 6.

It’s a nice solution for non-developers as it has an integrated WYSIWYG (what you see is what you get) chart editor. Its learning curve is rather smooth and it’s been used by a number of major players, like Facebook or Microsoft—there’ve even been claims that 72 out of the 100 of the world’s largest companies have used it at some point.Contrary to Recharts and D3, it’s a paid solution and carries a $1500 price tag for an unlimited commercial use license.

Under the hood, however, it feels like it was written in 2009. Recently, one of my colleagues walked me through her experience with it and let me tell you, it wasn’t very pleasant. It works great when you’re not fiddling around under the hood, but when you want to—it’s a chore.

Works with: anything

Highcharts GitHub
Highcharts website

Zoomcharts

Charts - Zoomcharts

 

Another commercial JS data viz tool, calling itself the “world’s most interactive JavaScript charts library.” Besides reactivity, it’s focused primarily on multi-touch gestures and a native feel across all kinds of devices. The library promises beautiful visualizations that need little code and can be easily deployed in your product.

Zoomchatrts are Canvas-based, and with default settings the library works up to twenty times faster than its SVG-based competitors using the same data and settings. I couldn’t find the exact pricing for Zoomcharts, but I found a couple of comments that called it “expensive.” Whatever the price may be, however, in return you get amazing interactivity, multi-touch gestures, and high-caliber customer support.

Works with: anything

Zoomcharts website
Zoomcharts gallery

The growing number of data viz libraries out there proves how important visualizations are for the whole Web—and that’s pretty exciting! I hope this list will help you create beautiful charts in your future projects. Good luck!

Love beautiful products? We do, too.

Work with us and make sure that the vision you carry in your head will become reality.

Talk to our team and build a product you and your users will want to use.

ux interviews How UX Interviews Help Develop a Better Software Product—A FAQ List
good-practices-in-HR-apps-design How to Design Your HR Tech App—Good UX and UI Practices
HR software communication How to Sell Your HR App—Good Practices in HR Software Communication