My 6 Top JS Data Visualization & Reporting Libraries

Veronika Rovnik
Bits and Pieces
Published in
6 min readApr 16, 2019

--

Web developers often have to find different ways to represent data in their apps. In this post, I’ll try to cover the basic features of tools that may help you to do it in the best possible way.

We use web or web-based reporting tools to view, create, and/or edit reports using any web interface — a web browser. These tools can be embedded in different third-party applications or be standalone as well. The initial purpose of web reporting is to organize data in an actionable format by using the web as the only medium.

In the primary phases of data analysis, reporting plays a pivotal role. It is readily used to present data in an interactive and visually appealing way that simplifies data analysis. The interactiveness greatly differs from one platform to another, or from one report to another.

The basic web reporting tools are easily used to filter, sort, export, and drill through the different semantic data layers for effective analysis. These functionalities make the end users able to conduct in-depth data analysis.

However, not only can you show numbers in a table but also represent them with lovely visualizations. Thus, I’ll give a high-level overview of standalone web pivot table controls and some JavaScript charting libraries carefully picked among the dozens of others.

Tip: Build a scalable and modular frontEnd with Bit components. Turn your UI components into shared building blocks to build faster as a team. try it:

Material-UI components with Bit: Share, choose, use

Chartjs

Lightweight. Simple. Captivating. These three words best describe Chartjs library. This tiny open-source library, written in pure JavaScript, may win your heart at first usage as it ships at only 11 Kb, offers the wrapper libraries for React, Angular, AngularJS, Ember, and Meteor. Charts are not only incredibly interactive but also responsive and customizable according to the design of your application. Besides, you can change its styles, enable plugins to add more features such as axis labels, tooltips and more.

Its documentation is short yet extensive and concise — you can find here the most essential information for configuring your first data visualization project.

WebDataRocks Web Pivot Table

For those who would like to use an efficient tool for data visualization and analysis, this web reporting tool for developers is one of the available options. It is written in JavaScript and displays data available in CSV and JSON files in an engaging pivot table. It will help you to understand the data better. It offers an enhanced web reporting experience where you can know the real-time data reports.

Moreover, WebDataRocks provides many data analysis features to make web reporting easier for users. This easy-to-use pivot control supports drag and drop, multiple data fields, grand totals, and subtotals, sorting, localization, filtering, drill down, and more.

And it can be integrated with Angular and React in a few steps!

This free web pivot grid tool can also be used by not ‘techie’ people, unlike similar ones. It’s designed more for those who want to analyze their data quickly and in an efficient manner.

Google Charts

There is no way you didn’t hear about this charting service. Google Charts takes the leading position on the market of free data visualization libraries. Charts are compatible with all modern and older browsers. However, the material design theme is not supported by IE.

It provides developers with extensive customization options. By using its API, you can create responsive and interactive charts with different configurations and add them to your web application effortlessly. I recommend to try animating charts — your visualization will look even more unique.

To my mind, Google Charts is the best choice for those who need to create a performance dashboard as it comes with various gauge charts, timelines, maps, and controls.

Find a rich gallery of available charts, maps, and controls on their website.

PivotTable.js

The initial function of this free web pivot table is to allow users simple data analysis and exploration by offering drag and drop support. Nicolas Kruchten primarily created the PivotTable.js in CoffeeScript and built it on top of the jQuery and jQueryUI. Typically, users prefer this web pivot table because they can change the appearance using a custom color scale — e.g. they can redefine the original set of colors and later they have the option to customize as per their tastes. Users are also able to utilize easy-to-understand and use filtering and grand total options.

This web pivot grid offers localization support and has a built-in table, heat map, and table-bar chart renderers. PivotTable.js also offers add-ons enabling users to convert the pivot table into a pivot chart.

NVD3

You can’t miss charming visualizations of NVD3. These interactive and reusable chart components can add a little spice to any project, regardless of the industry you are working in. However, I find them the most suitable for financial analysis. The set of charts is modest but it’s enough to meet the requirements of your visualization project.

Chart components are built on top of D3.js but they are much easier to manipulate with. To learn how to customize them, you can find more details in this well-written documentation. To speed up your visualization process, I recommend to use it with Fastdom.

As well as D3.js, this library is free and open-source. Everyone can contribute to its development.

React-Pivot Table

React-Pivot Table is another React-based library through which you can create pivot grid apps with drag-and-drop functionality.

Basically, it’s another version of the jQuery-based PivotTable.js by Nicolas Kruchten that I’ve listed above but more native for React developers and with the support of Plotly.

Thus, I’ll not write a lot about it. Still, this web pivot control offers localization support and has a built-in table, heat map, and table-bar chart renderers. You can filter your data, evaluate grand totals and change the appearance of the pivot table as well.

Final thoughts

Hope this short overview will help you choose a solution that fits both technical and design requirements of your project. I’ll be glad to hear your thoughts about your favorite tools that you use to empower the web apps with reporting and data visualization features. Do they integrate seamlessly with various frameworks? Are you satisfied with the documentation they provide?

--

--

Passionate about mathematics, machine learning, and technologies. Studying approaches in the field of data analysis and visualization. Open for new ideas :)