You can get started with simple and free charting libraries like Chart.js, Echarts, Chartist, N3-charts, EJS Charts and JScharts etc or go ahead with commercial products like Highcharts.js, Fusion charts, ZingChart or AmCharts.
The answer to this question depends on many factors including your liking, skill level, learning curve, input data formats, chart types required, interactivity level required, performance, 2D or 3D, targeted browsers, targeted platforms, and of course budget at hand.
If your requirements are limited to embedding few simple charts on your website or blog, or if you are a student working on some university report project etc, the answer gets very simple – go for an open source and free library like Chart.js, JScharts, D3.js or Google Charts, and there are many more.
While libraries like D3.js, Echarts and Google charts are free, they are real powerful and feature rich and are widely used for enterprise grade projects too.
On the other side, if you are working for a large organization, chances are that you won’t have much of a constraint on the budget. If that is so, there are few good options including names like Highcharts, Fusion Charts, ZingChart and AmCharts.
Our team has gone through various charting libraries, so you don’t have to try them all, listed below are the best libraries for charts and a summary of the key features –
D3.js is more of a library for developers than designers, data scientists or business analysts. D3 is modular and extensible, and there are many modules and ready to use charts built on top of D3, by community of developers. You can check out the list of D3 npm Modules here.
D3 utilizes web standards like SVG, CSS, HTML and Canvas to the fullest to offer maximum performance and flexibility. With D3 you can bind data with the DOM and then apply transformation to the documents for interactivity.
You might like this course, currently on discount – Data Visualize Data with D3.js
Read more about D3.js here – d3js.org.
HighCharts is the #1 in commercial space and offers most sophisticated data visualization solutions to enterprises of all sizes and scale. Highsoft is the company behind Highcharts, based out of Norway and operating worldwide.
Apart from Highcharts, HighSoft offers two more products in the data visualization named HighMaps and HighStocks, used for dynamic maps and interactive representation of stocks.
The power of Highcharts can be gauged from the fact that 72 out of the 100 largest companies in the world use Highcharts for one or other of their visualization projects, at the time of writing. Some of the big names include Facebook, City, Visa, Groupon, IBM, Mastercard, Verizon and AT&T.
An interesting feature from HighSoft is the HighCharts Cloud that lets you create interactive visualizations to embed in social media feeds, blogs or websites, all without the need to do any coding. Non-programmers can also download Highcharts Editor that offers wizard style UI to easily create and publish charts of all types.
You can read more about HighCharts at – Highcharts.com.
3.Google Charts – Free
Like any other product from the house of Google, Google charts is for the masses and one of my go to libraries for creating and embedding charts in websites and blogs that I run. It is very easy to add zoom and pan functionality to embedded charts, more features can be used, as required.
Given below are some of the cool features of Google charts –
- HTML5/SVG based, and for that reason, cross browser and cross platform compatible, including iOS and Android.
- Collection of charts ranging from simple scatter plots to hierarchical tree maps.
- Real time data representation via webservices/SQL connection to data sources.
- Open source and free to use, and free support on Google Charts Forum
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.
More about Google charts here – Google Charts.
4.Chart.JS – Free
Chart.js is another open source and free to use library that is used by masses, thanks to Nick Downie – the creator. With over 30K stars on GitHub, continuous improvements and updates by the community, chart.js ranks much higher than many commercial products.
Chart.js offers 8 different chart types, all of which are responsive and fit on devices of all sizes. It is a perfect solution for designers and developers looking forward to use out of the box charts without getting into development. To get started, you can either download the source from Github or use the chart.js CDN.
Chart.js renders lightning fast charts with HTML5 Canvas under the hood, charts can be animated and further extended with custom code, as required.
5.Fusion Charts – Commercial
A big advantage of using Fusion Charts is an easy start, there are tons of live examples hosted on JSFiddle with full source code, that can be downloaded and used as it is.
The ready to use examples include charts that are relevant to many industries and domains including manufacturing, education, sales, marketing, healthcare, government, IT and the most common chart types that are fit for all.
Another good thing is Fusion charts integrate well with various libraries, frameworks and languages including jQuery, React, Angular, PHP and ASP.Net, it means that Fusion Charts seamlessly fit into your current stack.
Charts can be exported to various formats like PDF, JPEG, PNG and SVG, which makes it easier to embed/include charts in reports and documents.
Elegant and lightweight is the tag I would use for Chartist.js. With an enthusiastic and intelligent community of developers, Chartist has grown in popularity and features in a very short span of time, and offers a responsive and DPI independent charting solution.
Chartist.js 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.
Read more about Chartist.js here at – Chartist-js.
7.Echarts – Open Source, Free
If Google has Google Charts, Baidu has Echarts. Echarts is an open source chart library from Baidu that offers highly customizable & interactive charting and data visualization features.
Echarts is the latest one to see the boom and uses modern technologies including zrender, which is a lightweight canvas library. You can enhance the capabilities of Echarts further by using Echarts GL, which provides webGL acceleration, globe visualization and 3D plots.
For sure, Echarts should be the most used charting library in China, but is not limited to china only. You can download Echarts from GitHub and start using in your projects, free of cost.
More about Echarts – https://github.com/ecomfe/echarts
8.ZingChart – Commercial
ZingChart is another commercial product in the market that is doing great. ZingChart offers integration with many third-party tools including React, Ruby, Node.js, PHP, Angular, jQuery, Backbone, Angular and more.
ZingChart also has a solid customer base with names like Telefonica, Nasdaq, Fidelity, Cisco and Microsoft. ZingChart, Inc. is based out of San Diego, USA and is known for its fantastic customer support.
ZingChart comes packed with dozens of ready to use charts including, Radar, Word cloud, Treemap, Cone, 3D Cylinder, Gauge, Stepped, Pareto, Venn, Maps, Stock, Heatmap, Scatter and many more.
To start using ZingChart, you can use npm module or include ZingChart from CDN. You can download and use ZingChart for free but “Powered by ZingChart” watermark appears on all charts. You need to subscribe to one of their plans to remove the watermark.
Read more about ZingChart here – Zingchart.com.
9.Vega – Open Source Chart Library
Vega is the recent entrant in the game and is growing at a very rapid pace. Vega comes with a different approach and provides a set of declarative language specifications for visual encoding rules, data transformations and much more for creating visualizations.
While you can use Vega as is, it is a perfect base tool for creating your own visualization libraries and ready to use interactive charts. The building blocks included in the Vega core include designs for map projections, legends, plotting symbols, lines, scales, rectangles and much more.
Check out the official website here at – Vega Charts
10.Datawrapper – Commercial
Datawrapper provides Data tables, maps, column charts, stacked bar charts and line charts, these are all fully responsive and can easily be embedded in the leading content management systems and websites. Datawrapper charts adapt to the styling of the blog or news websites and fits in seamlessly.
Official Website – Datawrapper Charts and Maps
AMCharts is another commercial library that competes with top three commercial players – HighCharts, ZingChart and Fusion charts. Some of its renowned customers include names like SAP, RBS, DOW, Audi, Yandex and Pfizer.
Amcharts is an 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.
Read more about Amcharts here – Amcharts.com.
Plotly can be used for creating charts, presentations and dashboards, its customers include names like Google, Siemens, P&G, NASA, Goji and Simple Bio. Plotly has four plans that include a free community edition, personal edition at a very nominal price, professional edition and an on-premise model.
Plotly comes with many enterprise grade features that include integration with LDAP and Active Directory groups, API support for Matlab, R and Python, exporting options to SVG, EPS, HTML, PDF, and it can connect to 18 different data sources (out of the box) including Excel, SQL, CSV files and many more.
Check out the official website here – Plot.ly
13.AnyChart – Commercial
The recent release of AnyChart offers additional charts like Mekko chart, Venn Diagram, Mosaic Chart, waterfall chart, bar stock chart, tag cloud and many more options.
Official Website – AnyChart
Canvasjs offers very simple API that can be used to create dashboards that render across devices including windows Phone, Android, iPad, iPhone and Desktops etc.
Read more here at – Canvasjs.com.
EJSchart used to be a commercial library but has recently gone open source, and for that reason, it is now available as free to use for anyone. EJSchart.js is an advanced library and offers smooth user experience and interactivity with features like mouse tracking, scrolling, crosshairs, key tracking hints, on the fly data loading from XMLs, stackable multiple chart series etc. and much more.
Another cool feature of EJSchart.js is axis locking, wherein user can lock one axis and scale across the other one. Some of the key chart types supported include areas series, function series, line series, pie series, doughnut series, floating bar series, analogue gauges series and stacked bar series.
Read more about EJSchart at – Ejschart.com.
16.Cytoscape.JS – Open Source, Free
They prefer to call it graphs theory library, and rightly so. Cytoscape contains many useful functions in graph theory and is used heavily by data scientists, students and professors for creation and analysis of graphs and diagrams.
The library was originally developed at Donnelley Centre and university of Toronto and is backed by funding from the likes of NRNB, NIH and Agilent to name a few.
Read more – Cytoscape.org
Angular has an ecosystem of its own and N3-charts represent a charting library in that ecosystem. Built using D3.js, N3-charts is for Angular lovers and can be used to create interactive, simple yet beautiful charts. It supports basic features like panning, zooming etc.
As with most of the charting libraries built on top of D3.js, N3-charts too takes way the efforts required to work with D3.js and offers an easy to use framework for rendering charts in web pages.
Read more about N3-charts here – n3-charts.
18.Ember Charts – Charts for Ember Framework
The library is not that actively upgraded but is an easy to use option for Ember lovers who just want some simple charts like pie, scatter, bar charts, time series etc. without getting into any other framework or library beyond Ember itself.
Read more about Ember Charts here – ember-charts.
Go for Chartkick.js if you are looking at simple to use library without all the jazz, well suited for basic data visualization needs.
Read more – Chartkick.
ShieldUI takes your graphing and data visualization needs to an all new level, apart from the regular charts, it offers various Barcode rendering options, QR code rendering, tag clouds, tree maps, grid, accordion, autocomplete and many other UI components.
Read more about ShieldUI here at – ShieldUI Charting product
C3.Js is D3 based reusable charts library, it gives high level wrappers to generate D3 based charts without the need to write D3 code. It lets you customize the style with easy mark-up. The state of the chart can be controlled using C3 APIS to bring in interactivity.
Read more about C3 here at – http://c3js.org/.
Recent advancements in the web technologies have given real powers in the hands of designers and developers to create interactive, engaging, lightweight, fast and smooth charts, and of course, most of the top charting libraries incorporate and offer latest and greatest in the world of data visualizations.
The libraries covered in this article are among the most popular in free as well as commercial tier and are fit for individuals, small scale organizations as well as for large enterprises.
As per your requirements, narrow down to 2-3 libraries from the above list, subscribe for trial version (in case its commercial), play around with the library for a while and then close on to one that you like.