33 JavaScript Data Visualization Libraries for Making Beautiful Charts and Graphics

A curated list of awesome data visualization libraries for the JavaScript programming language.

If you are new to JavaScript, then check out my list of free JavaScript books to get you started on your programming journey.

And, finally, if you know of any other JavaScript data visualization libraries that you think should be on this list, please let me know in the comments section.

1. D3

D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.


PykCharts.js is a well designed d3.js charting without the complexity of d3.js. It includes 26+ well-designed, themeable, responsive, modular, real-time and easy to use charts and 109+ maps.


The aim of three.js is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.


Chart.js is a simple yet flexible JavaScript charting library for designers and developers that allows the creation of HTML5 charts using the canvas element.


Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.


Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. It is also an SVG-to-canvas parser. Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection.


Peity (sounds like deity) is a simple jQuery plugin that converts an element’s content into a simple mini <svg> pie, donut, line or bar chart.


Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.


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.

10. VIS.JS

vis.js is a dynamic, browser based visualization library. It is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data. It consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

11. TWO.JS

two.js is a two-dimensional drawing api meant for modern browsers. It is renderer agnostic enabling the same api to render in multiple contexts: webgl, canvas2d, and svg.


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.


Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.

It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible.


Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.

15. DC.JS

Dimensional charting built to work natively with crossfilter rendered using d3.js.

16. VEGA

Vega is a visualization grammar, a declarative format for creating and saving interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.


Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.


Envision.js is a library for creating fast, dynamic and interactive HTML5 visualizations.


Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock.

20. FLOT

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.


Morris.js is a very simple API for drawing line, bar, area and donut charts.

22. NVD3

NVD3 is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizeable, staying away from your standard cookie cutter solutions.

23. SVG.JS

svg.js is a lightweight library for manipulating and animating SVG.


heatmap.js is a JavaScript Library for HTML5 canvas based heatmaps.


jQuery Sparklines makes it easy to generate a number of different types of sparklines directly in the browser, using only a line or two of HTML and Javascript. It has no dependencies other than jQuery and works with all modern browsers and also Internet Explorer 6 and later (excanvas is not required for IE support).


xCharts is a D3-based library for building custom charts and graphs.


Trianglify was written by Quinn Rohlf and is a JavaScript library that algorithmically generates SVG triangle art background images.

28. D3-CLOUD

d3-cloud is a Wordle-inspired word cloud layout generator written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive speeds.

29. D4

D4 is a friendly charting DSL for D3. The goal of D4 is to allow developers to quickly build data-driven charts with little knowledge of the internals of D3.


The aim of dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive. It also exposes the d3 objects so you can pick them up and run to create some really cool stuff.


Chartist.js is a simple responsive charting library built with SVG. It’s goal is to provide a simple, lightweight and unintrusive library to responsively craft charts on your website.

Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it’s own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS. The single and only responsibility of Chartist is to help you drawing “Simple responsive Charts” using inline-SVG in the DOM, CSS to style and JavaScript to provide an API for configuring your charts.


Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two different aspects of visualization programming: basic charts for creating historical reports, and real-time charts for displaying frequently updating timeseries data.

33. C3

c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.

One Response

  1. Serge Pogosyan July 29, 2016

Leave a Reply