JavaScript Charting Libraries

Updated Sep 09, 2021#javascript#libs#lists

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 - 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 - 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 - 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 - 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 - 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 - 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 - A JavaScript charting library based on SVG, with fallbacks to VML and canvas for old browsers.
  • ApexCharts - A modern charting library that helps developers to create beautiful and interactive visualizations for web pages.
  • Sigma - 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.