What are the best JavaScript libraries for creating visualisations of data as charts/graphs?

Question

22

Options
Considered

244

User
Recs.

Aug 24, 2020

Last
Updated

Here’s the Deal

22 Options Considered

Best JavaScript libraries for creating visualisations of data as charts/graphs	Price	Last Updated
87 D3.js	-	Apr 14, 2020
76 Chart.js	-	Sep 29, 2019
-- AnyChart	-	Jun 29, 2020
-- Highcharts	-	Apr 5, 2020
-- CanvasJS Charts	-	Jul 19, 2017

See Full List

I Recommend...

Built By the Slant team

Find the best product instantly.

Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Try it now - it's free

score 51 · Answer 1

D3.js

Top Pro

Great for highly interactive scenes

D3.js offers incredible levels of interactivity. See More

Top Con

High learning curve

The complexity and flexibility of D3.js results in it being a time-consuming tool to learn for many users. D3 is incredibly flexible; probably more so than any other JavaScript visualization library at the time of this posting. With that flexibility comes increased complexity. If you just want to create some quick charts you will get results faster with something else. See More

Robert Petty's Experience

Steep learning curve but very customizable See More

Top Pro

Easily the most versatile of the JS libraries for manipulating data on the DOM

Top Con

Requires a lot of work to setup

PaulJ's Experience

Extremely flexible but requires too much effort and time to learn and get things done. See More

Top Pro

Huge number of examples online

Most of them by the author, but there's also a great community writing plugins and more examples See More

Top Con

"Selections" are elegant, but somewhat hard to grok

Selections are core to working with D3 beyond the basics. They're powerful and useful, but require new developers to get up to speed (e.g. set aside 30m to read and digest: https://github.com/mbostock/d3/wiki/Selections) and if used in the context of a larger application will result in a portion of the code using different patterns than the rest, requiring a translation layer in between. See More

Top Pro

Doesn't require a proprietary framework

D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework. See More

Top Con

In fact no API for events

Top Pro

SVG Support

Scalable Vector Graphics (SVG) provides resolution-independent, vector-based, animatable graphics. See More

Top Con

Slow on complex charts

Top Pro

Very flexible join paradigm

Can be tricky at first, but once learned, data manipulation and binding can easily generate complex visualizations for massive amounts of data. See More

Top Pro

Easy to implement animations

Top Pro

Backwards compatible

D3.js is intended for modern browsers, so supports IE9 and above (IE8 with an additional library) as well as all the other modern browsers. See More

See All

Built by Slant

Find the best product
instantly.

Stop wasting time searching endlessly. Lustre recommends the best products at their lowest prices – right on Amazon.

4.7 star rating

Add to Chrome - It's Free

Add to Edge - It's Free

Add to Firefox - It's Free

Add to Opera - It's Free

Add to Brave - It's Free

Add to Safari - It's Free

Try now - it's free

score 19 · Answer 2

Chart.js

Top Pro

Tiny size that makes it very fast

The library contains a set of 6 charts and is 11Kb gzipped, this makes its loading time and page impact extremely low. See More

Top Con

Limited features and chart types

Tiny size means tiny offering. Don't choose this library if you need more than a simple bar/pie/line setup. See More

Ray's Experience

I used Chart.js in a project once and I'll definitely be using it again. It's straightforward, documentation is awesome (many examples and code samples), charts are slick, there's pretty much zero learning curve or complexity. On top of all that, it's open source and MIT-licensed. See More

Top Pro

Responsive charts

The charts are fully responsive, meaning they resize based on the viewport width. See More

Top Con

Canvas based

Canvas it bitmap based and shares the same issues as non-vector formats. See More

PaulJ's Experience

Good for the simplest charts. See More

Top Pro

Clear documentation

The chart.js documentation is well organized and provides detailed information on using each feature. See More

Top Con

Limited features

Chart.js currently offers only 6 graph types, and lacks the flexibility offered by other options. For example, controlling the display of tooltips is fairly limited. See More

Top Pro

Many types of charts provided

Charts.js offers 6 chart types (Bar, Line, Radar, Doughnut & Pie, Polar area, and Bubble). In addition, you can choose to fill in area, show data points as scatter or create mixed charts. See More

Top Con

Some bugs in js

Specially bug in line chart. See More

Top Con

No interactivity

The library lacks interactivity and drill-down functionality See More

See All

score 23 · Answer 3

AnyChart

Top Pro

A lot of different data formats

xml, json, csv, js api. See More

Top Con

Proprietary

Top Pro

Lots of chart types

Including bar, line, area, scatter, waterfall, spline, funnel, bubble, polar, column, columnrange, pie, box plot, angular gauge, areasplinerange, and other types of "basic" charts (AnyChart); Gantt charts (AnyGantt); Maps (AnyMap), and Financial/Stock charts (AnyStock). See More

Top Con

Expensive

Once you use it on anything but a site, it rapidly gets expensive. See More

Top Pro

Independent from other js libraries

no jQuery or libraries. See More

Top Pro

IE6+ support, along with mobile browsers

Top Pro

Experienced team and long product history

AnyChart is on the market since 2003. See More

Top Pro

Events support

Top Pro

Flexibility

Any part of chart can be adjusted. See More

Top Pro

A lot of integration templates

Technical integration templates for many popular stacks. See More

See All

score 10 · Answer 4

Highcharts

Top Pro

Flexible and powerful

The API is complete with lot of options, yet easy to use. Excellent documentation. Fast, interactive, working in all browsers. See More

Top Con

The examples are not that great

For instance, example's JsFiddle may get stalled when loading. See More

Top Pro

Clean, neat design

Pleasant charts, with attention to detail See More

Top Con

Pretty basic feature wise without plugins

Top Pro

Lot of chart types

Including maps (via Highmaps plugin) See More

Top Con

Commercial

The commercial nature if you want to sell closed source projects using it shouldn't be an issue if you make money out of your product... For non-profit or personal project, it is under the permissive Creative Commons Attribution-NonCommercial 3.0 License. See More

Top Pro

Wide browser compatibility

Very wide browser support, including IE 6, Chrome, Firefox. See More

Top Con

Primitive API and features

Top Pro

Good documentation

Very handy with examples and explanations. See More

See All

score 11 · Answer 5

CanvasJS Charts

Top Pro

Works across devices and browsers

Charts can render across devices including iPhone, iPad, Android, Windows Phone, Desktops, etc. See More

Top Con

No drill-down

There is no drill-down possibilities built in. See More

Top Pro

High performance

Charts can render tens of thousands of data points without any performance issues. See More

Top Con

Non-interactive

Charts lack interactivity features. See More

Top Pro

Free for non-commercial use (Creative Commons Attribution-NonCommercial 3.0 License)

Top Con

Cost for commercial use

Top Pro

Start-up friendly

Offers discounted pricing for start-ups and new companies. See More

Top Pro

Good commercial pricing

A single developer license for CanvasJS costs $299. See More

Top Pro

Supports 24 different chart types

Supports 24 different chart types including line, column, bar, spline, area, pie, doughnut, stock charts, etc. See More

See All

score 7 · Answer 6

Shield UI Charts

Top Pro

Many chart types available

There are more than 20 types of charts available for use. See More

Top Con

Commercial

Pay by developer starting from 349$. See More

Top Pro

Wrappers for ASP.NET, ASP.NET MVC and Apache Wicket

Each chart can be implemented to ASP.NET and ASP.NET MVC applications, with detailed documentation and guides for each. See More

Top Pro

Good documentation

Each of the available charts has documentation and guides available for every different implementation (JavaScript, ASP.NET etc.) See More

Top Pro

Interactive charts

The charting widget is built to facilitate client side interactions and notifications. See More

Top Pro

Out of the box pan-and-zoom

Zoom-in on specific points of interest on the graph with the mouse – a single property allows this out-of-the-box. See More

Top Pro

Supports combining different charts

You can combine different charts (they can be of the same type or even different types of charts) to display data correlations. See More

See All

score 2 · Answer 7

Raphael

Top Con

It's not built for making charts

Raphael is a draw library used to make charts. It's not a chart-only library and as such it may have limitations compared to libraries that are only used to build charts. See More

Top Pro

Every object is interactive with events

Everything that is drawn in Raphael is an object which means it is easy to manipulate any part of the rendered image after it is processed. It uses an event handler system for user inputs which makes it easy to learn for JavaScript developers used to event based libraries. An interactive chart demo. This style of handling objects makes Raphael a good fit for rendering interactive diagrams and charts that can also interact with other parts of the page. See More

Top Pro

Built in animations

Several built-in animations (such as ways of easing) are provided for you out of the box, but Raphael also allows cubic beziers for more complicated easing functions. Any drawing object property can be modified making it similar to css animations in jQuery. See More

Top Pro

Works with older browsers

Because Raphael supports rendering VML + SVG, it is one of the few drawing libraries that is backwards compatible with older browsers that do not support canvas. See More

See All

score 3 · Answer 8

Plotly

Top Pro

Can use the javascript library directly or via several language bindings including R, Python, Julia and others

Python or R, for example are preferable to working in JavaScript for many data-specialized programmers. See More

Top Pro

3D surfaces and other advanced plotting

Top Pro

Plotly.js is open source

Top Pro

Uses d3.js and stack.gl

See All

score 12 · Answer 9

amCharts

Top Pro

Feature rich and easy to understand

amCharts includes everything a graphing library can provide. From low-level customization to high level complexities, they're all there. Check out their demos page to get creative ideas about using the library on your site. The syntax is pretty simple and self explanatory too, here's a quick example of a new chart: var chart = new AmCharts.AmSerialChart(); chart.dataProvider = chartData; chart.categoryField = "country"; var graph = new AmCharts.AmGraph(); graph.valueField = "visits"; graph.type = "column"; chart.addGraph(graph); chart.write('chartdiv'); See More

Top Con

Expensive

Top Pro

Online editor allows creating charts without coding

Top Pro

Tons of demos and tutorials, good documentation

Normally coding tutorials won't be required for integrating amCharts thanks to the Live editor. However if any help is required the amCharts website has a tutorial for everything ; be it MySQL integration, real-time data or even adding to Wordpress. See More

Top Pro

Friendly support that really helps

They take pride in their 100% response rate for the commercial versions of their product, so getting help won't be very tough. See More

Top Pro

Stable; Has been in the market for a long time

amCharts started out making flash charts back in 2006, they then shifted to js based charts as demand for flash decreased. Considering that, they're one of the most experienced companies out there with a stable product. See More

Top Pro

Supports themes

See All

score 12 · Answer 10

ZoomCharts

Top Pro

Charts-on-Charts

ZoomCharts patented technology called Charts-on-Charts, which allows to dynamically build multiple interactive charts inside one canvas object. See More

Top Con

Very expensive

Top Pro

Multi-touch

ZoomCharts is built for mobile devices. All native multi-touch gestures are built in. Data navigation and exploration is as native as it could ever be. See More

Top Pro

Interactivity

All ZoomCharts products have high level of interactivity available. See More

Top Pro

Speed & Performance

ZoomCharts are canvas based, as tested with default settings, more than 20 times faster as svg based competitor with same data and default settings. Video available on ZoomCharts youtube channel. See More

Top Pro

Extensive documentation

Most of ZoomCharts customers do comment that ZoomCharts Documentation is one of the best that they have seen See More

Top Pro

Fantastic Support

They responded to my issue/question really amazingly fast and that means I didn't have to halt my project development. Also the attitude was great. See More

See All

score 2 · Answer 11

Chartist.js

Add Video or Image

score 1 · Answer 12

C3.js

Add Video or Image

score 1 · Answer 13

Pixi.js

Add Video or Image

score 1 · Answer 14

Webix

Top Pro

Opensource standard edition

Top Con

Advanced widgets are proprietary and expensive

$800 for access to the spreadsheet widget See More

Top Pro

Provides commercial support

See All

score 3 · Answer 15

Google Charts API

Top Con

Proprietary

Top Pro

FREE!

Top Con

Cannot self-host

Google does not allow you to save or host the code yourself. See More

Top Pro

Easy to use

Google Charts has a large selection of chart types to get started with and have up in running in very little time. It uses sensible defaults, but has flexible options to allow for customization when needed. Better than most other free to use Chart APIs and has great documentation provided by Google. See More

See All

score 3 · Answer 16

Livegap charts

Add Video or Image

score 22 · Answer 17

ZingChart

Top Pro

Tons of styling options

You can get extremely granular with the styling (which is very CSS-like). You can customize pretty much any aspect of a chart, so they can match your application or website perfectly. See More

Top Con

Not open source

Top Pro

Robust API

The advantage of using a JavaScript charting library is that you can make interactive charts. The API here lets you make the most of this advantage. See More

Top Con

The free version inserts a watermark on all charts

Either their watermark is on all the charts or you have to pay expensive license fees. See More

Top Pro

Easy to try

ZingChart hosts the full version of the library for evaluation on their CDN for you to try in just a matter of minutes. See More

Top Pro

Angular wrapper

Top Pro

Free branded version

There is a free version available, however it's branded. Licenses start at $249. See More

Top Pro

jQuery wrapper

ZingChart has a well-built and excellently documented jQuery wrapper, making it easier to integrate ZingChart into your jQuery code. See More

Top Pro

Handles large data sets without bogging down

See All

score 1 · Answer 18

Recharts

Add Video or Image

Answer 19

Plotly Charts

Add Video or Image

score 1 · Answer 20

ApexCharts

Add Video or Image

22 Options Considered

My Recommendation for D3.js

My Recommendation for D3.js

Great for highly interactive scenes

High learning curve

Easily the most versatile of the JS libraries for manipulating data on the DOM

Requires a lot of work to setup

Huge number of examples online

"Selections" are elegant, but somewhat hard to grok

Doesn't require a proprietary framework

In fact no API for events

SVG Support

Slow on complex charts

Very flexible join paradigm

Easy to implement animations

Backwards compatible

My Recommendation for Chart.js

My Recommendation for Chart.js

Tiny size that makes it very fast

Limited features and chart types

Responsive charts

Canvas based

Clear documentation

Limited features

Many types of charts provided

Some bugs in js

No interactivity

My Recommendation for AnyChart

My Recommendation for AnyChart

A lot of different data formats

Proprietary

Lots of chart types

Expensive

Independent from other js libraries

IE6+ support, along with mobile browsers

Experienced team and long product history

Events support

Flexibility

A lot of integration templates

My Recommendation for Highcharts

My Recommendation for Highcharts

Flexible and powerful

The examples are not that great

Clean, neat design

Pretty basic feature wise without plugins

Lot of chart types

Commercial

Wide browser compatibility

Primitive API and features

Good documentation

My Recommendation for CanvasJS Charts

My Recommendation for CanvasJS Charts

Works across devices and browsers

No drill-down

High performance

Non-interactive

Free for non-commercial use (Creative Commons Attribution-NonCommercial 3.0 License)

Cost for commercial use

Start-up friendly

Good commercial pricing

Supports 24 different chart types

My Recommendation for Shield UI Charts

My Recommendation for Shield UI Charts

Many chart types available

Commercial

Wrappers for ASP.NET, ASP.NET MVC and Apache Wicket

Good documentation

Interactive charts

Out of the box pan-and-zoom

Supports combining different charts

My Recommendation for Raphael

My Recommendation for Raphael

It's not built for making charts

Every object is interactive with events

Built in animations

Works with older browsers

My Recommendation for Plotly

My Recommendation for Plotly

Can use the javascript library directly or via several language bindings including R, Python, Julia and others

3D surfaces and other advanced plotting