50 JavaScript Libraries for Charts and Graphs

JavaScript Charting Libraries

How are you visualizing data in JavaScript? What is your favorite library for creating charts and graphs with JavaScript?

I have been a long time fan of jqPlot for its open source approach, simplicity, examples, and great features. It performs well, it is used by many corporations, and it is built on top of jQuery. Recently, however, D3 has really caught my eye. It uses JavaScript, HTML, SVG and CSS to really bring data to life. It is also open sourced, does not depend on jQuery, has a ton of examples, and there are even some good charting libraries based on D3. The other big player is HighCharts, also written in pure JavaScript with all demos that you can view and edit in JSFiddle and it also has some powerful features. Beyond these three, there are many more useful JavaScript charting libraries worth considering. Here is a list of the top 50 JS libraries for making charts and graphs:

FusionCharts – they call themselves an enterprise-grade JavaScript charting component and with good reason I suppose. They are probably the best-looking of the lot and have 90 chart types that work across devices and browsers (including IE 6, 7 and 8 for which they use VML). They have a ton of business dashboard examples, extensive documentation and some good articles on charting best practices. They also have a jQuery plugin. FusionCharts started a decade back (they even have a book on their startup journey) and claim to have 21,000 customers (LinkedIn, World Bank, White House, Oracle etc).

D3 – is really amazing and I love it’s simplicity. The documentation is really extensive, the source code is hosted on GitHub, and the examples are never-ending. There is a D3 prototyping tool called Tributary with many great examples. It’s so good that xcharts, nvd3, Rickshaw, Cubism.js, dc.js, and xkcd are all based on D3. If you are making some amazing custom data visualizations, D3 should probably be your choice, otherwise these d3-based libraries mentioned above are great for more simple straightforward graphs. Finally, I highly recommend looking at Scott Murray free book on D3 called Interactive Data Visualization for the Web and Dashing D3 tutorials.

HighCharts – very powerful, I love the JSFiddle examples and powerful features. I don’t like the license fee but they have great customers (IBM, NASA, MasterCard, etc). They also have backward compatibility with IE8.

jqPlot – if you are already using jQuery, you don’t want to pay for HighCharts, and D3 is too much for your simple use cases, then jqPlot is an excellent choice.

dygraphs – open source JavaScript library that produces interactive, zoomable charts of time series. It is really excellent for large data sets.

Protovis – free and open-source created by the same team that is now working on D3. If you are interested in comparing D3 to Protovis, check out this stackoveflow page.

Flot Charts – similar to jqPlot, Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features. If you are interested in comparing Flot to jqPlot, this thread has some good information.

Google Chart Tools – powerful, free, simple to use, and it has everything from simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types.

dc.js – a javascript charting library based on D3 with native crossfilter support and allowing highly efficient exploration on large multi-dimensional dataset.

xcharts – a D3-based library for building custom charts and graphs.

nvd3 – allows you to build re-usable charts and chart components without taking away the power that d3.js gives you.

rickshaw – JavaScript toolkit for creating interactive time series graphs.

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

xkcd – allows you to make XKCD-style plots in Javascript using D3. Check out xkcdgraphs to make your own xkcd graphs.

jQuery Sparklines – a jQuery plugin that creates small inline charts directly in the browser.

peity – a simple jQuery plugin that converts an element’s content into a simple CANVAS mini pie, line or bar chart.

BonsaiJS – lightweight graphics library with an intuitive graphics API and an SVG renderer.

Flotr – a Javascript plotting library for Prototype.js. It comes with great features like legend support, negative value support, mouse tracking, selection support, zoom support, event hooks, css styling support, text included into the canvas, rotated labels, color gradients, graph title and subtitle, spreadsheet, CSV data download and much more.

ProtoChart – As the name suggests, ProtoChart allows you to create beautiful charts using Javascript and Prototype. It is open sourced, uses Canvas, and was highly motivated by Flot, Flotr and PlotKit libraries.

Flotr2 – a recent project by HumbleSoftware that lets you make graphs and charts with Canvas and JavaScript. HumbleSoftware also came out with envisionjs which uses flotr2 and allows you to make dynamic HTML5 visualizations.

jQuery-Visualize – HTML5 canvas charts driven by HTML table elements. Another charting plugin for jQuery.

JS Charts – a JavaScript based chart generator that requires little or no coding. The free version has a watermark which can be removed by paying for a license.

PlotKit – a chart and graph plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is a complete rewrite of CanvasGraph.

MilkChart – a compact JavaScript framework for creating graphs based on MooTools. It is simple and easy to understand.

moochart – is another plugin for MooTools and it focuses on drawing bubble diagrams on the canvas tag.

moowheel – a JavaScript connections visualization library based on MooTools.

table2chart – a MooTools plugin that generates charts from accessible data tables.

Canvas 3D Graph – a special type of bar graph that plot numbers in 3D.

TufteGraph – another JavaScript charting library based on jQuery. It has a really compact API and non-core layout is done via CSS.

ArborJS – a graph visualization library using web workers and jQuery.

TimePlot – focused entirely on graphing time-series data, with support for annotating the graph with temporal events.

gRaphael – create stunning charts on your website, based on Raphael graphics library.

ICO – another JavaScript graph library based on Raphael.

Elycharts – a pure javascript charting library, easy to use and completely customizable. It is based on jQuery and Raphaël libraries.

ZingChart – allows you to build advanced charts and visualizations in HTML5, SVG, VML and Flash.

RGraph – produces interactive charts using the HTML5 canvas tag.

Dojo Charting – if you are already using Dojo, then Dojo’s charting library is a great solution for making charts and graphs.

Bluff – Bluff is a JavaScript port of the Gruff graphing library for Ruby. It is designed to support all the features of Gruff with minimal dependencies.

canvasXpress – a javascript library based on the Canvas tag implemented in HTML5.

ccchart – a Simple JavaScript chart that does not depend on libraries such as jQuery.

JIT – JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

JSXGraph – a cross-browser library for interactive geometry, function plotting, charting, and data visualization in a web browser.

Smoothie Charts – a JavaScript Charting Library for Streaming Data.

YUI Charts – YUI module that provides a JavaScript API for visualizing data in a variety of formats leveraging SVG, HTML Canvas and VML to render its graphical elements.

amcharts – JavaScript/HTML5 charts including serial (column, bar, line, area, step line, smoothed line, candlestick and ohlc graphs), pie/donut, radar/polar and xy/scatter/bubble charts.

Emprise JavaScript Charts – pure JavaScript charts with great features and good cross browser support.

JavaScript Diagram Builder – a library of some objects and functions, which can help you to display a chart or graph in an easy way.

jGraph – HTML5 diagramming component with full IE 6-8 and touch device support.

Sencha Touch Charts – it uses HTML5 Canvas and CSS3 to deliver charts to the mobile web browsers.

Style Chart – a free Ajax Visualization Charting Service

If you are looking for more libraries and web services that deal with visualizing data, I recommend checking out Datavisualization.ch.

Have I missed any good JavaScript charting libraries?

Update:

AwesomeChartJS – great looking charts with JavaScript and the canvas element

Sigma.js – an open-source lightweight JavaScript library to make network visualizations using the HTML canvas element.

Graphene – a realtime dashboard & graphing toolkit based on D3 and Backbone.

jQuery ToastChart – a line-graph charting library that is designed to show all types of data using the HTML5 canvas element.

ChartsJS – Easy, object oriented client side graphs for designers and developers.

Cytoscape.js – open-source JavaScript graph library for analysis and visualization.

Ember Timetree – visualize hierarchical timeline data with Ember.js and D3.js.

Simplify.js – tiny high-performance JavaScript 2D/3D polyline simplification library (extracted from Leaflet)

DataMaps – Maps for interactive data visualizations in Javascript (with d3js)

Aristochart – simple and sophisticated static 2D line charts.

Morris.js – time-series line graphs with jQuery and Raphael.js

Grafico – a javascript charting library based on Raphaël and Prototype.js

jQuery orgChart – a small JQuery plugin that generates a hierarchical orginisational chart from a nested unordered list.

TimeChart – powerful and simple to use chart library for creating time based charts in pure HTML5-JavaScript.

JointJS – open source JavaScript library for creating diagrams.

sDashboard – simple & light weight dashboard framework in javascript

jQuery Spidergraph – an interactive HTML5 spider graph module for jQuery.

sheetsee.js – visualize data from a Google spreadsheet.

Chartbuilder – D3.js based front-end charting application that facilitates easy creation of simple beautiful charts

dViz – a declarative data visualization library written in JavaScript. Embed charts into the page by just modifying some HTML code.

Chartkick.js – Create beautiful Javascript charts with minimal code.

Facebook Twitter Hacker News Reddit More...
  • http://www.kodyaz.com eralper

    A good reference for Javascript developers searching for a good library for graphics tasks

    • iweczek

      Thanks.

  • Paul Lazarev

    There is also dhtmlxChart, Canvas-based JavaScript charts that support the main chart types: line, spline, area, bar, pie, scatter, etc.
    http://www.dhtmlx.com/docs/products/dhtmlxChart/index.shtml

  • http://twitter.com/davidberneda David Berneda

    TeeChart for Javascript outputs charts, gauges and maps using HTML5 Canvas and 3D WebGL.
    Its free for non-commercial use.

    Online live demo: http://www.steema.com/files/public/teechart/html5/v2012.12.14.1.4/demos

    Homepage: http://www.steema.com/teechart/html5

    • Hector

      I really like this library as well.

  • Paul Gardner

    I was surprised not to see Telerik’s Kendo DataViz listed. Works well, and includes many options. Documentation is good. It’s not free of course!

    • iweczek

      Thanks Paul, here is the link if anyone is interested. It looks really good.

  • Bredonian Gray

    Yet another article that screams : Hey here are the top twenty items I found on the first page of google — why not list them out and publish them as a post. Seriously people ? Please atleast attempt to make some sort of comparative analysis and weigh their advantages and disadvantages before hitting the post button. Considering the listing is in absolutely arbitrary order with zero attempt towards prioritization or categorization you can’t even call it a curated collection. Please don’t be yet another site in the pointless race of increasing the number of blog posts by copy-pasting the first few lines of executive summary from arbitrary projects.

    • Wiktor James

      I agree, pretty worthless post. I thought it was an add for D3. I am having performance issues with some chart libs I have tried. So, now I take this list and try each one? Just tell me which charts you have used and give real details. I made a better list when I first started looking at charts for my use.

      • iweczek

        You made a better list? Does it have over 50 client side solutions? I would love to see it and I would probably bookmark it for a time when I am researching front-end solutions to charting data.

    • iweczek

      It’s not top 20, its top 50+ and that’s the difference. Next time I am looking for client side graph solutions I can just come back to one page instead of browsing Google. And, if you actually read it you would see some my input: use dygraphs for large data sets, highcharts for non-commercial projects, etc. Anyways, this is going to a great resource for me in the future and I am just sharing in case other people will also find it beneficial.

  • niko

    You missed Harry Plotter. small, no dependancies, totally free, generator included.
    http://nikopol.github.com/Harry-Plotter/#tab=generator

  • lordscarlet

    I don’t understand how this post has no images…

    • http://www.craze.org.uk Poz

      Seriously…

  • taylor wang

    ichartjs is a HTML5 canvas charting library. written in pure JavaScript,supports line, area, column, bar, pie chart types.
    Its free for commercial use.
    Demo: http://www.ichartjs.com/samples/
    Homepage: http://www.ichartjs.com/en/
    Code: http://code.google.com/p/ichartjs/

  • NAIF

    good work!

  • Philip Duggan

    A great list and here is another one that is 100% pure javascript:-

    Active Graphs and Charts

    http://jpowered.com/graph_chart_collection/index.htm

  • jake

    GoJS, a new HTML canvas-based diagramming library with all sorts of useful features. Node and link concepts (with data binding, templating), layouts, an undo manager, drag and drop/cut and paste. over 50 sample programs.

    In other words, a very rich set of diagramming features layered on HTML5 canvas.

    http://www.gojs.net/

    • iweczek

      Very cool, thanks for sharing.

  • wrot

    You might also want to look at these HTML5 Charts http://canvasjs.com

  • http://twitter.com/pallavn Pallav Nadhani

    A detailed comparison of features and chart-types for many of these libraries can be found @ http://www.fusioncharts.com/javascript-charting-comparison/

  • K.Moon

    KoolChart is a HTML5 canvas charts that written pure java script. it support over 20 charts.

    Home : http://www.koolchart.com
    Demo :http://www.koolchart.com/demo
    Mobile Demo : http://m.koolchart.com

  • K.Moon

    KoolChart is a HTML5 canvas charts that written pure java script. it support over 20 charts.

    Home : http://www.koolchart.com
    Demo :http://www.koolchart.com/demo
    Mobile Demo : http://m.koolchart.com

  • jkiernander

    dimplejs.org (launched since this article was written) is a very flexible charting api based on d3

    • Farrukh Subhani

      dimplejs is quite easy to use

  • http://monkeyraptor.johanpaul.net/ Monkey Raptor

    Awesome list. Thanks for the cool compilation.

  • roblanphier

    I need to put a plug in for Limn, a d3-based tool we developed at the Wikimedia Foundation for building dashboards with a few common graph types (focused mainly on timeseries as of this writing). Best place to see Limn in action is here: http://reportcard.wmflabs.org/ Links to code, etc, is at the bottom of that page.

  • http://www.bulgaria-web-developers.com/en/home Dimitar Ivanov

    Check out ZinoCharts – jQuery micro-library for beatiful SVG charts.
    See http://zinoui.com/demos/chart

  • Andrey Kuleshov

    There is one more powerful JavaScript charting and visualization library – ChartJS
    http://chartjs.devexpress.com

    There is a lot of sample in their Visualization Gallery

  • Jonathan D Johnson

    Small, dependency free, Interactive Bubble Charting Solution … http://jondavidjohn.github.io/bubblechart/

  • Maciej Pleśnar

    We’ve recently created a javascript webgl lib for 3D charts: http://incharts3d.com

  • jancha

    Hi chaps, there’s a new player out there – DataVisualizationSoftwareLab.com – they offer pure HTML5 javascript SDK for adding TimeChart, PieChart, NetChart to your side – don’t be fooled by the name, these charts offer new level of interactivity, extensibility and flexibility. It’s a new product, built in 2013, so no legacy crap. Supports multitouch out of the box.

  • http://www.freebets4all.com Chris Castle

    Would have been nice to have a check list of features for each

  • http://jsgadget.ru/ Serge Ryadkow

    Look component http://jsgadget.ru/jschart.html, but site is in Russian

  • jbo5112

    Your link for nvd3 goes to nvd3.com, when the charting site is at nvd3.org

  • MartinNelson455

    There is one mre charting library I would recommend not only for the 20+ chart types but also for the look and feel working with it and all this- free for non commercial users:
    http://www.shieldui.com/products/chart