JavaScript
Article

16 JavaScript Libraries for Creating Beautiful Charts

By Syed Fazle Rahman

It is practically impossible to imagine any dashboard without graphs and charts. They present complex statistics quickly and effectively. Additionally, a good graph also enhances the overall design of your website.

In this article, I will show you some of the best JavaScript libraries for graphs / charts. These libraries will help you create beautiful and customisable charts for your future projects.

While most of the libraries are free and open source, some of them provide a paid version with additional features.

D3.js — Data-Driven Documents

d3js

When we think of charting today, D3.js is the first name that comes up. Being an open source project, D3.js definitely brings many powerful features that were missing in most of the existing libraries. Features like “Enter and Exit”, powerful transitions and syntax familiarity with jQuery or Prototype make it one the best JavaScript libraries for charting. Charts in D3.js are rendered via HTML, SVG and CSS.

Unlike many other JavaScript libraries, D3.js doesn’t ship with any pre-built charts out of the box. However, you can look at the list of graphs built with D3.js to get an overview.

D3.js doesn’t work well with older browsers like IE8. You can always use plugins like aight plugin for cross browser compatibility.

Websites like NYTimes, Uber and Weather.com have used D3.js extensively in the past.

Google Charts

google-charts

Google Charts is my go-to JavaScript library for creating charts easily. It provides many pre-built charts like area charts, bar charts, calendar charts, pie Charts, geo charts, and more.

Google charts also comes with various customization options that help in changing the look of the graph. Charts are rendered using HTML5/SVG to provide cross-browser compatibility and cross platform portability to iPhones, iPads, and Android. It also includes VML for supporting older IE versions.

Here’s a great list of examples built using Google charts.

ChartJS

chartjs

ChartJS provides beautiful flat designs for charts. It uses HTML5 canvas element for rendering. Support for older browsers like IE7/8 is added through polyfill.

ChartJS charts are responsive by default. They work well in mobiles and tablets. With 6 different types of core charts out of the box (core, bar, doughnut, radar, line, and polar area), ChartJS is definitely one of the most impressive open source charting libraries in recent times.

Chartist.js

chartistjs

Chartist.js provides beautiful responsive charts. Just like ChartJS, Chartist.js is also the product of the community that was frustrated by using highly priced JavaScript charting libraries. It uses SVG to render the charts. It can be controlled and customised through CSS3 media queries and Sass. Also, note that Chartist.js provides cool animations that will work only in modern browsers.

n3-charts

n3charts

If you are an AngularJS developer, you will definitely find n3-charts extremely useful and interesting. n3-charts is built on top of D3.js and AngularJS. It provides various standard charts in the form of customisable AngularJS directives.

Checkout list of charts built using ns-charts.

Ember Charts

ember-charts

Ember Charts is another great open source repository built with D3.js and Ember.js. It provides time series, bar, pie, and scatter charts that are easily customisable. It uses SVG to render charts.

Smoothie Charts

smoothie

If you are dealing with stream realtime data, Smoothie Charts may be helpful. It uses HTML5 canvas element to render the chart. It is a pure JavaScript library that provides options like delay and splash colors to the realtime graphs.

Chartkick

chartkick

Chartkick is a JavaScript charting library built for Ruby applications. It provides all the major chart types like pie, column, bar, area, geo, timeline, and multiple series. The charts render via SVG.

ZingChart

ZingChart

ZingChart offers a flexible, interactive, fast, scalable and modern product for creating charts quickly. Their product is used by companies like Apple, Microsoft, Adobe, Boeing and Walmart, and uses Ajax, JSON, HTML5 to deliver great-looking charts quickly.

Free to try, ZingChart licenses can also be bought at a variety of price-points to suit your business size. Check ZingChart out here.

Highcharts JS

highchartsjs

Highcharts JS is another very popular library for building graphs. It comes loaded with many different types of cool animations that are sufficient to attract many eyeballs to your website. Just like other libraries, Highcharts comes with many pre-built graphs like spline, area, areaspline, column, bar, pie, scatter, etc.

One of the biggest advantages of using Highcharts JS is the compatibility with older browsers like Internet Explorer 6. Standard browsers use SVG for the graphics rendering. In legacy Internet Explorer, graphics are drawn using VML.

While Highchats JS is free for personal use, you need to purchase a license for commercial usage.

Fusioncharts

fusioncharts

Fusioncharts is one of the oldest JavaScript charting libraries that was released in 2002. Charts are rendered using HTML5/SVG and VML for better portability and compatibility.

Unlike many libraries, Fusioncharts provides data parsing through both JSON and XML. You can also export these charts in three different formats: PNG, JPG and PDF.

Fusioncharts is highly compatible with older browsers like Internet Explorer 6. It has become one of the favorite charting libraries for many businesses just for this alone.

You can use the watermarked version of Fusioncharts for free in both personal and commercial projects. However, you need to purchase a license to remove the watermark.

Flot

flot

Flot is a JavaScript charting library for jQuery. It is also one of the oldest and popular charting libraries.

Flot supports lines, points, filled areas, bars and any combinations of these. It’s also compatible with older browsers like IE6 and Firefox 2.

Flot is completely free to use and commercial support is provided on special request to the creator. Here’s a list of example graphs created using Flot.

amCharts

amcharts

amCharts is undoubtedly one of the most beautiful charting libraries out there. It perfectly segregates itself into 3 independent charts — JavaScript Charts, Maps Charts (amMaps), and Stock charts.

amMaps is my favorite out the above three. It provides features like loading icons or photos on top of your map, heatmaps, drawing lines, and adding text on maps, zooming and others.

amCharts uses SVG to render charts that work in modern browsers only. These charts may not work properly below Internet Explorer 9.

Checkout this fantastic collection of cool demos created using amCharts.

The free version of amChart will leave a backlink to its website on the top of every chart. The commercial licenses are bit more expensive than most of the paid libraries in the market.

EJS Chart

ejscharts

EJS Chart claim themselves to be enterprise ready charting library. The charts look clean and readable than most of the older charting libraries. It is also compatible with IE6+ and other older browsers. Check out this list of examples.

EJS Chart comes in free and paid versions. The free version limits you to use maximum of 1 chart per page and 2 series per chart. Have a look at the pricing details here.

uvCharts

uvcharts

uvCharts is an open source JavaScript charting library that claims to have 100+ customization options. It has 12 different standard chart types out of the box.

uvCharts is built using D3.js library. It promises to eliminate all the difficult coding parts from D3.js and provide easy implementations of standard chart types. uvCharts are rendered using SVG, HTML and CSS.

Plotly.js

plotly_splash

Plotly.js is the first scientific JavaScript charting library for the web. It has been open-source since November 17, 2015, meaning anyone can use it for free. Plotly.js supports 20 chart types, including histograms, 3d plots, error bars, and maps. It can also do all of the basic charts like bar charts, line charts, and pies.

Plotly.js uses D3.js under-the-hood, so its an easier way to make D3.js graphs than using D3.js by itself. For some examples of graphs made with Plotly.js, check out Plotly’s graph news feed.

Conclusion

It now depends on you to select the best charting library for your future projects. Developers who like to have all the controls over their charts will definitely opt for D3.js. Almost all the above libraries have got a good support via Stackoverflow forums.

If you are looking for tools to generate ready made charts, head over to 5 Tools for Creating Amazing Online Charts article. You can also read Creating Simple Line and Bar Charts Using D3.js article to get started with D3.js. We also have a dedicated series on using Google Charts with AngularJS.

I hope you enjoyed reading this article. Have a nice day.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • omar

    Livegap charts | http://charts.livegap.com
    Free web app for generate charts online built on chartnew.js (updated version of chartjs) chart library

  • http://moritzklack.com/ moklick
  • Merrily Chopp

    Surprised http://www.zingchart.com isn’t on the list. It is the go-to library for interactive charts when you have big data sets. Plus the customization options are pretty sweet for a charting-specific library.

    • http://moritzklack.com/ moklick

      You have to provide a valid name and email to “try” it? haha. WTF?!

  • Antanas Marcelionis

    Thanks for a good review – just a small notice – our (amCharts) charts do work on old IE, as we use VML to render them: http://www.amcharts.com/browser-support/ Only maps do not work on old IE. As for prices, then I’d say they are less comparing to our main competitors.

  • http://www.designed.lv Smirnoff

    Surprizingly http://www.zoomcharts.com have been left out….

  • Abhinandan

    tl;dr which one of these can give me cool mouseover effects like highcharts and with open source license?

  • https://twitter.com/dmathisen36 dmathisen

    Library size is often a large factor for people. It’d be nice to see the size of each lib…

  • daydah

    Nice article Fazle! I have spent one too many an hour, searching for just the perfect charting library, so this is very useful to me. Some of my web apps have limited or no connection to the internet (archaic I know, but hey, I live in West Africa), and I need a charting library that will work offline. Does any of these work offline?

    • https://www.google.com/+SyedFazleRahman Syed Fazle Rahman

      Hi @daydah:disqus ,

      You have asked a great question. I think you can solve your problem using HTML5’s AppCache. Read more about it here: http://www.sitepoint.com/creating-offline-html5-apps-with-appcache/

      If the files provided by these libraries are stored locally, you can produce charts easily in offline apps.

      Regards

      • http://andyhasit.com/ Andrew Buchan

        Not in all cases. Google charts for example requires an internet connection. And it’s terms forbid you to copy their code offline, so they’re out of the equation.

  • chriscoyier

    If you wanna check out some live examples, I maintain a collection at http://codepen.io/collection/hsyFa/

  • https://www.google.com/+SyedFazleRahman Syed Fazle Rahman

    That’s a great collection @chriscoyier:disqus ! Thanks for sharing.. :)

  • daydah

    @fazlerocks:disqus Thanks! Checking it out ASAP!

  • Ally park

    wow, Thanks :-) That’s a chart what I was looking

  • Mikhail Tatsky

    The best JavaScript chart library is http://zingchart.com
    Why is it not in the list?
    It contains in 5-10 more features than any other chart library.

  • Mikhail Tatsky

    Interesting, I found some new that did not know about.
    But total number of chart libraries that are good more than 50.
    From them only 5 for real use in big projects.
    I like zingchart.com that is not in list.

  • Richard Heyes

    Another happens to be RGraph: http://www.rgraph.net Lots of different chart types, fast and lightweight.

  • Jaime del Palacio

    One more to the list: https://github.com/forio/contour. Good documentation, very easy to use yet very powerful extensibility to create your own d3 base visualizations.

  • Peter

    KendoUI is a great library which DataViz part is full of great libraries which have exceptional performance:

    http://demos.telerik.com/kendo-ui/

  • Sebastien Janaud

    JenSoft API has just released new Javascript charts Framework JenScript JS with great charts features http://www.jensoftapi.com/site/framework/jenscript Feel free to test it and forge an opinion.

  • Tommy

    http://anychart.com/ is also a nice library, I’ve been using it for years.

    • RAJESH SHETTY

      @disqus_ar7V3Q4KS7:disqus How do i use Anychart API in Angular JS Applications

  • http://www.softwarefx.com/ Ivan Giugni

    http://www.jchartfx.com is a great free library with many chart types, excellent performance and packed with tons of features.

  • Sunil Urs

    You might also want to checkout CanvasJS Charts.

    Product Page: http://canvasjs.com/
    Performance Demo: http://canvasjs.com/docs/charts/intro/high-performance-javascript-charts/

  • Oliver Watkins

    did you look at ExtJS charts?

  • Anvar

    Also check http://www.pluscharts.com/. It is a free light-weight javascript charting library based on RaphaelJS.

  • Ken Doko

    http://www.koolchart.com
    is also a cool solution. It supports lots of chart types and good features.

    http://www.koolchart.com/gallery

    http://www.koolchart.com/features

  • Sebastien Janaud

    JenSoft APIs javascript library is now free and open source! http://www.jensoftapi.com for website catalogs and source are available on github now https://github.com/sjanaud. contributors are welcome too (on javascript/svg and java API)

  • robin.ma

    I want tell you another lib.I think that is greate. http://echarts.baidu.com/

  • robin.ma

    http://echarts.baidu.com

    is also a cool echart. you can look at it .

  • Tomáš Smetka

    Thank you, good article! :)

  • mgalic

    Thanks for this link, much better comparison.

  • yeruva

    nice can any one help me how to work with Plot Points With SVG And Canvas

  • William Monroe

    Nice chart plugins, thank you!

  • Кирилл
Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.