image

JavaScript charting libraries

Notable libraries to draw charts and visualize data in browser

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

image

d3js.org

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

image

www.chartjs.org

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

image

echarts.apache.org

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

image

frappe.io

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

Plotly.js

image

plotly.com

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

image

gionkunz.github.io

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

image

airbnb.io

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

image

g2.antv.vision

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

image

www.highcharts.com

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

ApexCharts

image

apexcharts.com

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

Sigma

image

sigmajs.org

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.