JavaScript charting libraries

Oct 29, 2020 • ☕️ 2 min read

Any data focused application needs data visualization for the UI/dashboard. For web-based applications, those libraries are almost always Javascript. Getting the charts and visualizations right can be hard, but luckily, we have a variety of Javascript libraries to choose from such as D3.js and Chart.js.

Depends on the framework you are using, you may want to ensure that the library plays well with it. Most of the charting libraries are framework agnostic. And often, there are wrapper for each major framework.

D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation.

Chart.js

Chart.js is a simple and flexible JavaScript charting library, community maintained project, visualize your data in 8 different ways, great rendering performance across all modern browsers.

Echarts

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

Frappe Charts

Simple and modern SVG charts for the web with zero dependencies, GitHub inspired style, maintained by Frappe.

Plotly.js

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.

Chartist.js

Chartist.js is a simple responsive charting library built with SVG, works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality.

Visx

Visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

G2

G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms.

Highcharts

Highcharts JS is a JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.

ApexCharts

ApexCharts is a modern charting library that helps developers to create beautiful and interactive visualizations for web pages.

Sigma

Sigma is a JavaScript library dedicated to graph drawing. It makes easy to publish networks on Web pages, and allows developers to integrate network exploration in rich Web applications.

Related Posts

Build systems

Tools that automate a variety of tasks like compiling, packaging, testing and more

The hype microservices. Should I switch to it?

Microservices are an architectural and organizational approach to software development where software is composed of small independent services that communicate over well-defined APIs

React resources

Top resources for you to learn and find awesome stuff related to React web framework

Different types of DOM

Clearing the confusion on different types of DOM as you may have heard like regular, shadow, or virtual