Top 8 Open Source JS Libraries For Data Visualization
This article can be helpful to choose JavaScript charting library for your project.
There may be times when you want to choose an open source javascript library for plotting charts on your web application and there are a number of libraries out there to choose from.This guide may be helpful in that situation.
I have selected 8 open source javascript libraries and listed below along with their Features, Link to a sample Bar chart developed using respective libraries, Link to other Demo Charts and recommended usage.
I have included only libraries that have seen github commits in last 1 month or less (at the time of writing this article). Also some libraries are built using React JS library.
1. D3.JS
D3 is abbreviation for Data Driven Documents. This is the library which can be considered as base language for Data Visualization On Javascript Platform. A number of other libraries are built on top of this. It uses SVG elements for plotting. However you can also combine Canvas elements with it [1]. This library has definition of bits and bytes of pure javascript code for creating data visualizations.
Click Here For Sample Bar Chart.
Features: Data-driven approach to DOM manipulation, Base Library for most of other libraries, There is a dev platform for experimenting with charts[2].
Demo Collection Link
Recommended Usage: Heavily Customized Charts, Innovative Data Visualization
2. DC.JS
This is a javascript library on top of d3.js for developing charts with lesser code. This uses crossfilter.js for data handling. This can be helpful in creating bunch of interactive graphs. You need to have some knowledge of d3.js and crossfilter.js to use this library.
Find Sample Bar Chart Using dc.js Here. [ I had to directly put my javascript code inside html document to make it work. There looks to be compatibility issues between the versions of libraries being used, at the time of writing this article.]
Features: Multidimensional Data Set Handling Made Easy, Good For developing Interactive Inter-related Graphs.
Demo Collection Link
Recommended Usage: Interactive Inter-related Charts on Dashboards, Innovative Data Visualization
Nivo is library of charts embedded in React Components. It is built on top of D3.js. There is a specific component for each type of chart. You will have to pass different configurations through props(React terminology[4], analogy is like passing parameters while rendering a component) for customizing the chart.
Find Sample Bar Chart using Nivo Here.
Features: Good customization through props, Server Side Rendering API, Responsive, Isomorphic rendering[5]
Demo Collection Link
Recommended Usage: Responsive Dashboards, Custom Configured Charts, Server Side Rendering
Charts.js library uses canvas elements of HTML to render charts. This is vanilla javascript library like d3.js and dc.js . There is a Chart Object which needs to be created and the configurations and data has to be passed as an argument to it.
Find Sample Bar Chart using Chart.js Here
Once the chart is plotted by creating new Chart object, if you want to change any data or configuration in that, then you will have to call update on the Chart object to render the changes.
Features: Good Look And Feel, Out of the box Animation, Responsive
Demo Collection Link
Recommended Usage: Simple Responsive Dashboards, When no much customization needed on charts nor user interaction, For small screen or when number of elements in the charts are huge [3]
This is another library for charts using React powered by d3.js. There are no specific components for each chart in this. Here the main component used is Chart which is then configured in your code with some other components provided in library, in order to plot the type of chart you want. You will have to play with few components and configurations to build a chart. Interactivity in the chart is achieved through React hooks React.useMemo or React.useCallback.
Sample Bar chart using this library is here.
[Note: At the time of writing this article there were few bugs found in sample charts out of the box. I will update this article after I find it fixed.]
Features: Responsive, Fully Declarative, Flexible data model
Demo Collection Link
Recommended Usage: Dashboard With Interactive Charts (only Line, Bar, Bubble, & Area Charts at the time of writing this article.)
6. Recharts :
One more library of charts embedded in React Components, using D3.js. This has chart specific components. One good thing about the design I liked in this is Declarative Configuration Components. i.e. Configuration & Customization is provided through clear separation of part of the chart as independent components, which gives a good readability of code while maintaining it.
Sample Bar chart using recharts library is here.
Features: Easy-to-use components, Declarative Configurations as Components, Responsive
Demo Collection Link
Recommended Usage: Quick Dashboard building, Composed Charts
As defined in its website “Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations”. It is another library with charts embedded in React Components. With their documentation and the way components are designed, the usage is very easy.
Find Sample Bar Chart Using This Library Here.
Features: Easy-to-use components, Fully contained, Responsive, React Native Support, Brush & Zoom
Demo Collection Link
Recommended Usage: Quick Dashboard building, Mobile Apps, Customized Charts.
One more react + d3 charting library. This contains bit low level components compared to other libraries. Means this is one layer above d3 for abstracting some complex code of d3. This library can be used to build your own Chart library on top of this. You will have to code some configurations before plotting any chart.
Find Sample Bar Chart using vx library here.
Features: Made For building Custom charts, Small Bundle Size Of Resulting Graphs, Easy Configurable Gradient Background
Demo Collection Link
Recommended Usage: Highly Customized Charts, Infographics
I have not used all of these libraries in my projects, but surely evaluated them. In case if you have used any of these frequently and if you have any new or different opinion please do comment.
Thank you for reading.
References
[1] Example d3 chart using canvas
[Edited on 18/06/2021]
