Data is the new oil, and it's still true in 2021. However, to turn data into insights, we need to analyze and visualize. So, here's the question: how to pick the right tool? 🛠
We'll go through...
- 📈 general-purpose charting libraries
- 📉 low-level and complex charting libraries
- 🏁 tables and data grids
- ⏰ timeline charts & time-based tools
- 🗺 geospatial and mapping tools
- ⛅️ word clouds
- 🌎 3D visualization tools
Also, to help you choose the right tool for your project, I'm going to include a brief summary of each framework, i.e.
- 💵 whether it's paid or open-source
- ⭐️ number of stargazers on GitHub, if it's open source
- 📅 when it was last released (as of today)
- 🧱 the size of the bundle (unpacked size on npm), and
I decided to sort the frameworks and libraries by the number of stargazers because it roughly approximates their popularity and community size (but that's debatable).
Also note that you won't find here an extensive list of every data visualization library which can be found on the internet. However, I hope that this post will help you build your own understanding of the ecosystem.
📊 And the icing on the cake: I'll provide links to guides and tutorials on data visualization tools built by the Cube.js team. Cube.js helps to create an API over any database with ease, and it's often used as a very performant backend for analytical data visualizations.
1. General-purpose charting libraries
The first category is probably the most popular. Most data can be visualized with charts: either temporal (when you include time values to the plot, e.g., on the X axis), or non-temporal (when you have only numeric values or labels). Those include bar chart, pie chart, line graph, and similar. And because it's the most used type of charts, there are numerous options to choose from.
💵 OSS / ⭐️ 51.8K / 📅 19 Oct 2020 / 🧱 1.44 MB / 🔌 universal
The most popular open-source library for building responsive bar, pie, and line charts. I'd say this is the go-to library for most of the projects, as it fits most of the use cases.
📊 See Chart.js Example with Dynamic Dataset to learn how to modify the data being displayed with Chart.js on-the-fly.
💵 OSS / ⭐️ 15.6K / 📅 13 Jan 2021 / 🧱 11.2 MB / 🔌 React
A composable charting library built on React components
As per description, "It was built on top of SVG elements with a lightweight dependency on D3 submodules." It's a good choice for React-based projects, because you can use it natively as a component, e.g.
📊 See React Dashboard: an Ultimate Guide to for a comprehensive all-in-one walkthrough exploring how to build a dashboard with Recharts and connect it to a backend.
💵 Paid & non-commercial licenses / ⭐️ 9.8K / 📅 22 Oct 2020 / 🧱 43.2 MB / 🔌 universal
Highcharts is good for large companies whose products rely heavily on data visualization. You can see the code on GitHub, try and use it for non-commercial purposes. And then you can purchase Highcharts license just for Hightcharts or Highcharts plugin for Stocks, Maps, or Gantt if you'd like to use it for commercial purposes. We'll cover those later in this post as well.
📊 See React Highcharts Example with Cube.js for a practical tutorial on creating a dashboard with numerous Highcharts components.
💵 OSS / ⭐️ 12.4K / 📅 11 Sep 2019 / 🧱 535 KB / 🔌 universal
Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries.
This library is not as actively maintained as others, however, it still worths a mention because of its size with no dependencies. Less than a megabyte, wow!
Just like others, it uses SVGs, it's flexible and it has clear separation of concerns, i. e., CSS is in CSS and JS is in JS, which may not fit all projects, considering that a lot of projects are using CSS-in-JS approach, yet it still deserves our attention.
💵 OSS / ⭐️ 8.6K / 📅 1 Sep 2020 / 🧱 2.81 MB / 🔌 React
An ecosystem of composable React components for building interactive data visualizations.
💵 OSS / ⭐️ 7.6K / 📅 19 Apr 2019 / 🧱 1.81 MB / 🔌 React
A collection of React components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.
This library is React-friendly, high-level and customisable, expressive and industry-strong, because it is backed by Uber, so chances are you'll get your answers in case you bump into an issue.
💵 OSS / ⭐️ 864 / 📅 18 Dec 2020 / 🧱 22.6 MB / 🔌 universal
A go-to library for data visualization. When you don't have time to learn new technologies.
This is not as popular as the rest, however, it's actively maintained and claims to be easy to use. It could be a good choice if you'd like to combine it with other data viz library for geo and timeline data. I'll cover those in Geo and Timeline sections.
💵 Paid & non-commercial licenses / ⭐️ 284 / 📅 29 Sep 2020 / 🧱 11.9 MB / 🔌 universal
This is a paid library with non-commercial license, which could work well for a company who wants to save time and money on charts development, because a lot of charts pre-configured for you, just insert your data. Even such rear charts as Jump Line Chart, Sunburst Chart, or Circular Gauge.
2. Low-level and complex dataviz tools
Here go tools for a more complicated and more advanced way to visualize your data. The main reason to go with this approach is either because none of the simple charts can be used to visualize your data, or you need to have more advanced interactivity on your elements.
This approach requires a more advanced and specific knowledge in the area, e.g., SVG drawing or WebGL. Not everyone has access to such resource, so that's why there are libraries that expose a much simpler API for simple cases.
💵 OSS / ⭐️ 95.4K / 📅 22 Jan 2021 / 🧱 1 MB / 🔌 universal
This is probably the most popular low-level data visualization library on the internet. There's a few keys to its popularity: first, its flexibility (many other data visualization tools are based on D3.js, we'll discuss them below); second, it's massive examples gallery which contains literally every visual you can imagine.
📊 See D3 Dashboard Tutorial for a good jump-starting point to learn how to use D3.js with a backend.
And here are a few D3-based libraries:
💵 OSS / ⭐️ 12.7K / 📅 21 Dec 2020 / 🧱 60.4 MB / 🔌 universal
Built on top of D3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
Plotly allows you to combine the best of two words: simple api and power of a D3.js. It's good for quick prototyping as well as complex projects that require complicated graphs and need to be done in a timely manner.
Plotly also has commercial offerings, but that's more in regard to its end-to-end development & deployment platform, Dash Enterprise.
💵 OSS / ⭐️ 9K / 📅 8 Aug 2020 / 🧱 1.46 MB / 🔌 universal
D3-based reusable chart library.
💵 OSS / ⭐️ 2.1K / 📅 21 Jan 2021 / 🧱 2.77 MB / 🔌 React
Semiotic is a data visualization framework combining React & D3
💵 OSS / ⭐️ 1.9K / 📅 26 Feb 2020 / 🧱 1.54 MB / 🔌 universal
💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal
A Declarative Framework for Rapid Construction of Web-based Visualizations
Another open source charting library that has enormous pre-defined charts ready to be used. The reason I put it in this category, is because not only it has simple charts, like line and bar graphs, but also more complicated ones, like 3D globe, 3D lines, Scatter GL and others. Checkout their example page and prepare to be amazed.
💵 OSS / ⭐️ 10.8K / 📅 14 Aug 2019 / 🧱 1.11 MB / 🔌 universal
Raphael is similar in D3.js in a way that it also allows you to draw your own svg graphics in html. E.g.
It hasn't been actively maintained and now most of the preference goes to D3.js. Yet it's still relevant and last release wasn't that long ago, so it does deserve a mention in the list.
3. Tables and data grids
Some data is tabular and thus belongs to a table. But tables are more framework-specific, so it's hard to collect data tables for every framework in one post. However, here are a few options.
💵 OSS & paid / ⭐️ 6.9K / 📅 15 Jan 2021 / 🧱 n/a / 🔌 universal
💵 OSS & paid / ⭐️ 272 / 📅 26 Jan 2021 / 🧱 n/a / 🔌 React
A fast and extendable data table and data grid for React.
It's a feature-rich component which is complementary to the whole Material UI set of React components. It's available in MIT and commercial versions, too.
There's also some competition here. For the sake of comparison, I should mention the data table component of Ant Design library, which is great to use if you need a complete set of UI components.
4. Timeline charts & time-based tools
Not all charting libraries include timelines and Gantt charts, they're quite unique in that sense. So if you have some time-based data to plot, then you may be interested in these libraries or plugins.
Similar to word clouds, you can have Highcharts Gantt plugin provided by the company. Check out out their page to learn more about it.
Similar approach: get the main amCharts library and use additional timeline plugin.
💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal
Create a fully customisable, interactive timelines and 2d-graphs with items and ranges.
This is an open-source alternative to the above two libs. It's quite flexible, well-designed, although its last release was about 3 years ago.
5. Geospatial and mapping tools
Now we've arrived to geo data, the type of data that has a geographic component to it and should have map-based data visualizations.
💵 OSS / ⭐️ 30K / 📅 4 Sep 2020 / 🧱 5.96 MB / 🔌 universal
Leaflet is lightweight, simple, and flexible, and is probably the most popular open-source mapping library at the moment. Leaflet was developed by Vladimir Agafonkin, who is currently in Mapbox (see below), and OSS community.
There are numerous tutorials and guides on how to work with leaflet. So it's very cost and time efficient to start and keep working with Leaflet.
💵 Free-ish & paid / ⭐️ 7.2K / 📅 28 Jan 2021 / 🧱 34 MB / 🔌 universal
Mapbox is a mapping and location cloud platform for developers.
These guys provide SDKs and APIs to companies like Foursquare, Lonely Planet, and Facebook. You can do a lot with Mapbox, and their APIs are a pleasure to work with, well-documented, and well-supported. Check out their examples page.
Mapbox isn't completely free. It has a free tier for low volume apps. So it's free for up to 25,000 mobile users and 50,000 web loads. Beyond that you'd need to pay per additional requests.
Google Maps can do a lot more than just show places on a map. You can map data across the world, create heatmaps, and even size circles.
Google has a CDN URL you'd need to include in your project or use a framework-specific wrapper, like
If your project is already using amCharts, then you might be interested in using amCharts maps. There is no need to install anything extra, the main amCharts package already includes everything needed for creating a map visualization.
6. Word clouds
Not all data is quantifiable. Some data can only be illustrated with words. This is a perfect use case scenario for word clouds. A few libraries allow you to do those.
💵 OSS / ⭐️ 3.3K / 📅 3 years ago / 🧱 n/a / 🔌 universal
Great library to use if you already have D3.js as a part of your code ecosystem.
This is a plugin for amCharts. See more details about amCharts earlier in this post. To create word cloud you'd need the main library + the
Similar to amCharts word clouds, if you want to make word clouds with Highcharts, you'd need
7. 3D visualization tools
While every tool we've observed above was focused on planar, two-dimensional data visualizations, there's one more dimension to it 😀 The following tools help create 3D visuals.
💵 OSS / ⭐️ 66.6K / 📅 24 Dec 2020 / 🧱 24.4 MB / 🔌 universal
The aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
Three.js is a different take on visualizing data. It's used to create and display animated 3D computer graphics in a web browser using WebGL. Three.js can be used not only visualize data, but also create such pieces of art as Littlest Tokyo. The data can take ANY form your like. Literary. It's only limited by your creativity.
💵 OSS / ⭐️ 44.9K / 📅 16 Jan 2021 / 🧱 36.3 MB / 🔌 universal
Graph3d is an interactive visualization chart to draw data in a three dimensional graph. You can freely move and zoom in the graph by dragging and scrolling in the window.
This is a very interesting lightweight alternative to D3.js and Three.js.
Honestly, it's impossible to include everything in one list. But I hope this post helped you get a better idea about the "big players" and types of data visualizations.
It's worth mentioning that to communicate your data better to your user, it's always a good idea to mix and match different types of data visualizations. Moreover, you can also have a date formatting library (such as Moment.js) or number formatting library (such as numeral.js) that could accompany your graphs and highlight any special or outstanding number in your dataset.
Also, if you need an API to serve data to your charts or data visualization components, please consider to use Cube.js.
If you have any particular recommendation or personal experience with any of the listed libraries to share, please feel free to reach out to me and leave a comment on Cube.js Slack! 🙌