Advancements in browser based technologies like JS, CSS, HTML5, WebGL and use of SVG for graphics has given real powers in the hands of JavaScript developers to create stunning visual effects and spice up graphs and charts rendering. There are many data visualization tools and resources to create graphs and charts but nothing does it better than the specialized JavaScript libraries like D3.js, Google Charts, Cytoscape.js, HighCharts & Amcharts, to name a few.
Let us look at the best of JavaScript libraries for Charts and graphs that make data visualization a real breeze.
Most of the JavaScript charting libraries covered in this article are available as open source and free to use, but I have covered some paid libraries as well, that are too good to be avoided.
D3.JS a.k.a Data Driven Documents
D3js is the most popular and powerful open source JavaScript library for charts and graphs. You can easily call D3 as the big daddy in the data visualization space. When it comes to learning D3js, there are tons of resources available around the web and a very helpful community to get you started within no time. D3.js injects life to raw data by manipulating HTML, CSS and SVG.
D3 complies with web standards and is extremely fast in creating interactive and animated data visualization components using large data sets.
The ecosystem of D3.JS has grown too huge that you find hundreds of plugins and supporting libraries built on top of D3JS. One of the biggest reason for existence of huge list of plugins and supporting libraries is the modular core design of D3.JS that allows code reuse and extension without breaking the core.
Read more about D3.js at official website here – d3js.org.
There are other commercial libraries like FusionCharts and HighCharts that compete with D3.JS and can be used for creating enterprise grade charts and graphs, but none of the mentioned two are free to use for commercial applications.
The popularity and power of HighCharts can be known from the fact that these have been used by the biggies like Facebook and Twitter. Highcharts being a commercial product, offers a lot more than just a data visualization library, one of the good features of Highcharts is “Highcharts Cloud”,, that offers online charts editor and hosting platform.
You can read more about HighCharts at – highcharts.com.
You can read more about FusionCharts at – fusioncharts.com.
Google Charts
It wont be wrong to say that any product from the house of google is for the masses. Google Charts is one of my favorite libraries for all my charting needs. Google charts library is open source and available free to use under creative commons attribution 3.0 license.
With Google charts you can create simple scatter plots as well as hierarchical treemaps, HTML5/SVG based, cross browser compatible, without the need of additional plugins.
With just a few simple steps one can add interactive Google charts to any webpage. Many of these charts come with out of the box zoom and pan functionality. You can also extend other basic charts to add more features, as per the data visualization needs.
When you use Google charts for data visualization, the possibilities are nearly endless, you can always use out of the box charts, customize and develop your own charts or use community contributed charts.
You can check out the Google charts gallery at – Google Charts Gallery.
More about Google charts here – Google Charts.
If you are among many of those enterprises that do not really go well with open source projects, there is no dearth of commercial libraries that would meet almost all of your visualization needs. Two such commercial products are Amcharts and ZingChart.
Amcharts – Amcharts is a very advanced charting library and can be used to create beautiful charts and interactive maps. Apart from the basic graphs like bar, line, area, pie and donut, it also offers step, smoothed line, candlestick, OHLC, Radar, Pola, Bubble, Funnel/Pyramid and Gauges etc. Amcharts also offers stockcharts as a separate product line.
Read more about Amcharts here – amcharts.com.
ZingChart – ZingChart is another visualization product that is doing great, it has JavaScript Charts integration with many third party libraries like Node.js, React, Ruby, PHP, Backbone.js, Ember and Angular to name a few.
Read more about ZingChart here – zingchart.com.
Chart.JS
Chart.js is lightweight yet powerful library for creating charts and graphs. Chart.js is the creation of Front end developer Nick Downie and available as open source under MIT license.
Chart.js is best for you if you have very specific needs and want to use out of the box charts without spending any real efforts. Chart.js comes packed with six different HTML5 charts built using canvas element. All of the six charts are responsive and fit to devices of any size, can be made highly interactive and support animations.
You can get more details on Charts.JS at – chartjs.org.
Canvasjs – Another good library for HTML5 javascript charts using canvas element is CanvasJS, but it is not free to use for commercial applications. CanvasJS Charts come with a simple to use API that supports charts rendering on almost all devices including iPad, iPhone, Windows Phone, Android and Desktops, etc
You can have a look at CanvasJS charts at – canvasjs.com.
EJSchart.js – This one is another commercial library offering free trial and is free for personal use but you need to purchase the license for commercial projects. It is best suited for midsized and enterprise grade data visualization needs.
You can read more about EJSchart at – ejschart.com.
Chartist.JS
This is one of the best open source charting libraries out there and makes DPI independent responsive charts plotting an absolute breeze. Chartistjs has a very active community and is growing at a much faster rate than other comparable products.
Chartist.js uses CSS for style, SVG for graphics, media queries for responsiveness and JavaScript for the overall control. The library is built with SASS and can be customized and extended with additional plugins. In fact, there are many ready to use plugins like Axis title, tooltip, fill donut and zoom etc. to name a few.
You can find Chartist.js plugins at – chartist-js plugins.
Read more about Chartist.js here at – chartist-js.
Cytoscape.JS
Cytoscaep.js is among the new entrants in the game of data visualization. The official website at this hour looks raw but it offers one of the most powerful and comprehensive libraries for building interactive graphs.
Cytoscape is written in pure JavaScript and can be used in apps and rendered in browsers without any external dependencies, available as open source, highly optimized and is compatible with most of the modern browsers.
The library was originally developed at Donnelley Center and university of Toronto and is backed by funding from the likes of NRNB, NIH and Agilent to name a few.
N3-charts
This one is for Angular lovers, n3-charts is built on top of Angular and D3 and can be used in any angular project with ease. It gives you simple, beautiful and interactive charting options. In the recent release, n3-charts now support zooming, panning and many other new features, out of the box.
n3-charts takes away all the pain of using raw D3.js library and gives you a framework that makes displaying charts on any webpage a breeze, using semantic language. Charting options with n3-charts are limited, but, if your needs are specific then there is no need to look back at D3, Google charts or any other big library.
You can look at the examples here and decide if n3 charts library is suitable for your project – n3-charts examples.
Read more about N3-charts here – n3-charts.
Ember Charts
This one is for Ember lovers, Ember charts library is built on top of Ember and D3.js can be used with any ember project with ease. The ember charts library utilizes jQuery and jQquery UI and the key features include labels, mouseover effects, tooltips and legends etc.
The current version of ember Charts comes packed with time series, pie, scatter and bar charts that can be modified and extended with ease.
Read more about Ember Charts here – ember-charts.
jqPlot
jqPlot is one of the most popular jQuery based charting libraries till date with pluggability as its core strength. You can use this library in any project where you use jquery javascript framework, in nutshell, it is the extension of jQuery to meet data visualization needs.
jqPlot doesnt compete with the biggies like D3, Google charts, Highcharts etc that offer almost any kind of charting, maps and plotting needs. jqPlot shines when it comes to creating beautiful line, bar and pie charts.
You can read more about jqPlot at official website – jqplot.com.
Elycharts
Are you still looking for more open source plotting libraries that suits best to your project needs. Here is another one, Elycharts, a pure JavaScript product for your charting needs.
Elycharts is sponsored by VoxMail and MagNews. It is based on Raphael and jQuery libraries and is free to use under MIT license for personal and commercial applications.
Elycharts offers below chart types as of now –
Chartkick.JS
Chartkick is very small and quick to use Ruby based charting library. Since it is primarily based on Ruby and you can start using it with just one line of Ruby. But the JavaScript version is available as well and that is why it is listed here. It works in most of the browsers including IE6.
Go for it if you are looking at simple to use library without all the jazz, well suited for basic data visualization needs.
Read more about Chartkick.js here at – chartkick.
Conclusion
There is no dearth of JavaScript Libraries when it comes to creating charts and graphs. Identification of one for your projects really depends on your design and development style, skillset and the features offered by these libraries.
Libraries mentioned in this article have great resources and big ecosystem to get you started within no time. You can easily find tutorials, documentation as well as fully functional code snippets for reference.
As per the needs of your project, you can pick a library that provides ready to use charts and graphs but offer lesser flexibility as well as libraries that let you build your own charts with full flexibility and customization options in your hands.
