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? π
In this post we're going to go through JavaScript frameworks and libraries that you can use to visualize your data. And I'd like to do a bit more than just list a few frameworks β I'm going to divide the list by the type of data or data visualization because "one size" doesn't fit all. There are different kinds of data, and each needs a specific visualization strategy.
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
- π whether it's specific for a particular framework (e.g., React) or it can be used in any JavaScript-based project.
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.
Chart.js
π΅ OSS / βοΈ 51.8K / π 19 Oct 2020 / 𧱠1.44 MB / π universal
Simple yet flexible JavaScript charting for designers & developers
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.
Recharts
π΅ 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.
<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<CartesianGrid stroke="#eee" strokeDasharray="5 5" />
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
π 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.
Highcharts
π΅ Paid & non-commercial licenses / βοΈ 9.8K / π 22 Oct 2020 / 𧱠43.2 MB / π universal
Highcharts is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.
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.
Chartist.js
π΅ 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.
Victory
π΅ OSS / βοΈ 8.6K / π 1 Sep 2020 / 𧱠2.81 MB / π React
An ecosystem of composable React components for building interactive data visualizations.
Built by Formidable Labs, a company behind such tools as urqls and Spectacle. Provides an opinionated, but fully overridable React components to use both in web and mobile (victory-native).
React-vis
π΅ 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.
amCharts
π΅ 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.
π See Slack Vibe, the Open Source Analytics for Slack for a story of an analytical tool that uses amCharts to visualize Slack data.
AnyCharts
π΅ Paid & non-commercial licenses / βοΈ 284 / π 29 Sep 2020 / 𧱠11.9 MB / π universal
Interactive JavaScript charts designed to be embedded and integrated into web, desktop, and mobile apps.
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.
D3.js
π΅ OSS / βοΈ 95.4K / π 22 Jan 2021 / 𧱠1 MB / π universal
D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas, and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
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.
<d3-based-tools>
And here are a few D3-based libraries:
Plotly.js
π΅ 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.
C3.js
π΅ OSS / βοΈ 9K / π 8 Aug 2020 / 𧱠1.46 MB / π universal
D3-based reusable chart library.
Semiotic
π΅ OSS / βοΈ 2.1K / π 21 Jan 2021 / 𧱠2.77 MB / π React
Semiotic is a data visualization framework combining React & D3
Taucharts
π΅ OSS / βοΈ 1.9K / π 26 Feb 2020 / 𧱠1.54 MB / π universal
Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.
</d3-based-tools>
Apache ECharts
π΅ 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.
RaphaΓ«l
π΅ OSS / βοΈ 10.8K / π 14 Aug 2019 / 𧱠1.11 MB / π universal
RaphaΓ«l is a small JavaScript library that should simplify your work with vector graphics on the web
Raphael is similar in D3.js in a way that it also allows you to draw your own svg graphics in html. E.g.
// Creates canvas 320 Γ 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
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.
ag-Grid
π΅ OSS & paid / βοΈ 6.9K / π 15 Jan 2021 / 𧱠n/a / π universal
Advanced Data Grid / Data Table supporting JavaScript / React / AngularJS / Web Components
Or, as it claims on its website, "The Best JavaScript Grid in the World." It's packed with features and has both OSS and Enterprise versions with bindings for vanilla JS, React, Angular, Vue, and even Polymer.
Material UI Data Grid
π΅ 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.
Highcharts Gantt
Similar to word clouds, you can have Highcharts Gantt plugin provided by the company. Check out out their page to learn more about it.
amCharts timeline
Similar approach: get the main amCharts library and use additional timeline plugin.
vis-timeline
π΅ 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.
Leaflet
π΅ OSS / βοΈ 30K / π 4 Sep 2020 / 𧱠5.96 MB / π universal
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of gzipped JavaScript plus 4 KB of gzipped CSS code, it has all the mapping features most developers ever need.
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.
Mapbox
π΅ 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.
π See JavaScript Map Data Visualization with Mapbox for a complete guide on Mapbox and different kinds of maps, from heatmaps to choropleths.
Google Maps
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 @react-google-maps/api
.
amCharts maps
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.
d3-cloud
π΅ 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.
amCharts word clouds
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 wordCloud
plugin.
Highcharts word clouds
Similar to amCharts word clouds, if you want to make word clouds with Highcharts, you'd need modules/wordcloud.js
module.
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.
Three.js
π΅ 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.
vis-graph3d
π΅ 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.
Final remarks
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 comment below! π
Top comments (7)
For fast development echarts the best choice. I use low level Visx react library for charts made by Airbnb. And for table I use headless react-table package
Nice! I LOVE react-table, used it in 3 of my projects already π
Wow! Thank you, Nikita!
Obviously, I like the references to Cube.js guides and demos because Cube.js surely works great an easy-to-set-up and fast API for dataviz tools. But I can clearly see how much more examples and guides we with tools like ag-Grid and Leaflet we can make! π
Thank you! Really helpful π
Let me share with these links
Almost all JavaScript Charts
github.com/zingchart/awesome-charting
Almost all JavaScript Grids
github.com/FancyGrid/awesome-grid
Amazing! ππ
Some comments may only be visible to logged-in visitors. Sign in to view all comments.