In recent years, there has been an explosion of tools available to designers and developers to generate charts and graphs in web pages and applications. In an arena that was once dominated by Flash or static images, now comes a wide array of visually stunning and dynamic tools that unlock a browser’s full potential using HTML5, SVG, CSS3 and JavaScript.
The correct choice of charting library in a website or app can make the difference between a poor user experience and something that people will share and use over and over.
This Wiki page is a useful reference for a comparison of JavaScript charting frameworks, although it is not all encompassing it does compare supported chart types and rendering technology for a host of popular libraries.
Here’s a list of 25 hand-picked libraries for graphs and charts that should hopefully serve as a useful reference guide.
1. D3
D3.js is a JavaScript library designed to manipulate documents based on data and some of the results are nothing short of spectacular. It utilizes the full potential of HTML5, CSS3 and SVG but in a fast, streamlined manner. Many other charting libraries are now based on D3 technology (such as dc.js).
2. Highcharts
Highcharts is an extensive library of charts and graphs using HTML5/JavaScript that works on just about any device or browser. It’s something we’ve used heavily at Kurtosys for several years, as the extensive range of options caters for most financial data scenarios.
3. Chart.js
Although limited to just 6 chart types, this HTML5-based library renders charts beautifully on screen and is very lightweight and simple to implement.
4. CanvasJS
Another library that uses the HTML5 canvas element – CanvasJS works across all devices, includes interactivity and is easily themeable across 18 chart types.
5. Sigma
Sigma.js is an open-source lightweight JavaScript library for generating data-driven node charts. It allows developers to integrate network exploration in rich Web applications.
6. jQuery Sparklines
A plugin that creates small inline charts (Sparklines) that are generated in the browser. A range of tiny charts can be customized with mouse-over interaction. This is a great tool for creating stock/fund prices inline with text, or as part of a mini dashboard.
7. Bonsai
A lightweight graphics library with an intuitive graphics API and an SVG renderer. The examples demonstrate not just charts, but simple games, animations and draggable shapes. Cool website too.
8. FusionCharts
This is a comprehensive library that includes 90+ chart types. They offer not just charts but dashboard widgets, gauges, Gantt charts, heatmaps and a whole series of interactive maps. These are one of the big players in the charting world and claim to have 22,000 clients. Love their Charting Best Practices page.
9. ZingChart
Build interactive charts with options to render in HTML5, SVG, image or Flash. Some really modern and cleanly designed examples in the gallery – love the mini-dashboard option.
10. xCharts
xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations using D3.js using HTML, CSS, and SVG. The examples also include some nice animation techniques.
11. amCharts
These guys sell a large array of JavaScript charts, stock charts and maps. There are some cool whizzy animation techniques and all charts seem to be themeable and interactive. The Stock chart is a powerful tool for the right application.
12. Plot.ly
Plotly is all about importing data from a variety of sources (Excel, CSV, Access, GoogleDocs) and creating beautiful charts. You can export to PNG, SVG, PDF, or EPS and all charts are interactive.
13. ShieldUI
Although not exclusively a chart library, this library does offer a range of chart types in its gallery, which includes a useful on-screen code editor. Free for non-commercial use.
14. ZoomCharts
ZoomCharts offer highly interactive HTML5 based charts with impressive results. The network chart is an awesome tool for the right type of data.
15. jChartFX
jChartFX uses pure JavaScript to render a variety of charts. It includes quite a large range of pie, scatter, bar, area, line, bubble and combination charts and is free for personal use.
16. Google Charts
Google offers a good selection of cross-browser compatible charts, including older versions of IE by using VML. Free to use, the gallery demonstrates standard charts, gauges, maps, timelines, histograms, tables and more. This library is also used via an API for other chart engines and plugins such as WordPress Visualizer.
17. Dojo Charts
Dojo charting is a cross-browser 2D vector graphics API that renders charts using SVG. The Business Charts package also comes with a variety of interactive features including touch support for mobile. All of it is completely free and open-source.
18. Flotr 2
Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements such as mobile support and custom chart types.
19. Zino UI Charts
Zino UI Chart widget is a jQuery Charts plugin, JavaScript chart and graph library for creating interactive charts.
20. GoJS
GoJS is a feature-rich JavaScript library for implementing interactive diagrams across modern browsers and platforms. It’s pure JavaScript and it does not depend on any JavaScript libraries or frameworks.
21. Kendo UI Charts
Kendo UI is a complete framework for building web and mobile apps in HTML5 and JavaScript. The chart gallery offers all of the usual chart types plus stock charts, gauges, maps and diagrams producing impressive results.
22. Sencha Charts
The Sencha framework offers Rich, interactive charts built in HTML5 for touch devices. It includes support for native gestures on mobiles and tablets such as pinch-to-zoom and swipe-to-pan, which brings charts to life and massively improves UX.
23. EJSCharts
EJSCharts offer 100% JavaScript charting with a range of chart types. Includes features such as hints, mouse tracking, mouse events, key tracking, and events, zooming, scrolling, and crosshairs which improve interactivity and UX.
24. Grafico
Grafico is a JavaScript charting library based on Raphaël and Prototype.js. It produces simple, clean charts inspired by work of Stephen Few and Edward Tufte.
25. dhtmlxCharts
dhtmlxChart is a JavaScript charting library for generating cross-browser HTML5 charts. Check the demos where you can edit the data on-screen to dynamically update the charts.
To see how the top money managers use dynamic charts, see our post on the top 20 ranked fund websites. And feel free to drop us a comment to suggest any cool libraries for graphs and charts that we have missed in this list.
