Best Free Charting Libraries (as of 2018)

Every business is turning to data analysis for important decisions. In fact they’re usually swimming in data, wondering what to make out of it. With the advent of big-data, good old spreadsheets and charts just don’t cut it anymore. After all, without adequate data visualization, it’s just garbage in and garbage out.
Below are mentioned the best JavaScript, jQuery and PHP libraries to assist you with your data analysis expeditions. However, the choice of these libraries depends upon the type of your applications.

Chartist.js

You can integrate the Chartist library in your project in many ways. It’s available from Bower and NPM but also directly from a content delivery network (CDN). It’s also exposed as a CommonJS module, as an AMD module or just in the global window object. You can decide on the best way to integrate the library according to your project’s setup.image

Chartist currently uses a Universal Module Definition wrapper, to satisfy a broad range of use cases. Instead of using Chartist directly from the Chartist namespace in the window object, you could use module loaders, like RequireJS, or bundle your charts into your application with Browserify or webpack.

License: Open-source. Free for all uses.


Echarts

Echarts is very useful for visualizing data on web pages. With it, you can create intuitive, customizable and interactive charts making interpretation and analysis of data easier.image

A lot of JavaScript charting libraries out there have been ported to JavaScript, meaning their usage do not flow seamlessly. That is not the case with Echarts though, as it was written in plain JavaScript.

Documentation is available for this library on its official web page, and you don’t have to freak out about its status of being a Chinese library. It is very well documented in English.

License Open-source. Free for all uses.

Dygraphs

Dygraphs is a fast, flexible open source JavaScript charting library. It allows users to explore and interpret dense data sets.image

The chart is interactive, you can mouse over to highlight individual values. You can click and drag to zoom. Double-clicking will zoom you back out. Shift-drag will pan. You can change the number and hit enter to adjust the averaging period.

Dygraphs handles huge data sets. It can plot millions of points without getting bogged down. Moreover, it is interactive out of the box, zoom, pan and mouseover are on by default.
It is also highly customizable, using options and custom callbacks, you can make Dygraphs do almost anything.

Dygraphs works in all recent browsers. You can even pinch to zoom on mobile/tablet devices!

License: Open-source. Free for all uses.

Chart.js

Simple, Clean, User-friendly are the perfect words to describe the Chart JS library. The Chart JS library is an HTML5 based JavaScript library for creating animated, interactive and customizable charts and graphs.image

With Chart JS, you can easily get to visualize your mixed chart types without hassle, creating responsive web pages by default.

This library allows you to get started with visualizing your data in quick time. Easy to set up, and beginner friendly. With it, you won’t have to get involved in browser compatibility issues, as it supports older browsers.

License: Open-source. Free for all uses.

Google Charts

Google Charts is an interactive Web Service that creates graphical charts from user-supplied information. The user supplies data and a formatting specification expressed in Java Script embedded in a Web page; in response the service sends an image of the chart. image

Google Charts offers a variety of charts through its rich gallery.  From simple scatter plots to hierarchical treemaps, find the best fit for your data. Moreover, as Google Charts are customizable, make the charts your own. Configure an extensive set of options to perfectly match the look and feel of your website. Cross-browser compatibility (adopting VML for older IE versions) and cross-platform portability to iOS and new Android releases is also available. Hence, no plugins are needed.

License: Free, but not open-source. Google’s licensing does not allow you to host their JS files on your server. So if you are an enterprise and have some sensitive data, Google Charts might not be the best option.

Highcharts

Bring your data to life with HighCharts.js. With Highcharts, you can create interactive charts using pure JavaScript. It renders easily with SVG and works perfectly with HTML5 as you try to add interactive charts to your web applications.image

It is very much lightweight, as it doesn’t require any plugin. This doesn’t make it any less efficient than the other charting libraries. You can create any chart you can think of, be it the column, bar, pie or polar chart without putting memory on the line.

In all of its simplicity, Highcharts is also very much compatible with old browsers, so you can pick it if you don’t need to represent data using advanced charting styles.

License: Free for non-commercial, paid for commercial uses.

Flot

Flot is one of the oldest charting libraries in the JavaScript world today. However, this by no means reduces its functionality as it supports line charts, pie charts, bar charts, area charts and even stacked charts. image

Flot has developed a huge following overtime and also has a wonderful documentation. Therefore, it is easier to find solutions to problems when you come across a brick wall.

It also gives support to older browsers.

License: Open-source. Free for all uses.

NVD3

Inspired by Mike Bostock and currently maintained by a team of frontend software engineers at Novus Partners, NVD3 is another quality D3 based JavaScript library. Allowing you to create beautiful reusable charts in your web applications.image

It has great features for visualizing data with lovely charts such as the box-plot, sunburst and candlestick charts. If you are looking for tons of functionality in a JavaScript charting library, NVD3 is the one to look out for.
As much as speed could sometimes be an issue with this library, using it with Fastdom installed makes it much faster.

License: Open-source. Free for all uses.

Ember Charts

A charting library built with the Ember.js and d3.js frameworks. It includes time series, bar, pie, and scatter charts which are easy to extend and modify. The out-of-the-box behavior these chart components represents our thoughts on best practices in chart interactivity and presentation. image

It is highly customizable and extensible, and rich with features – add legends, labels, tooltips, and mouseover effects. It is robust & polished too- weird data will not cause your charts to break.

Roll your own charts by extending our ChartComponent class – get labels, automatic resizing, and reasonable defaults for margins, padding, etc.

License: Open-source. Free for all uses.

jQuery Sparklines

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.image

The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android.

License: Open-source. Free for all uses.

C3.js

C3 is another very efficient D3 based chart visualization library. As a plus, it allows you to create classes that can easily be customized to personal taste or style.image

C3 on the surface looks like a difficult library to use. However, the moment you get a hold of its techniques, there is no stopping you.

With this charting library, you can update charts even after the first rendering by creating callbacks. It is easy to find your way around using this library, as it also reduces the work to be done by allowing you create reusable charts for your web applications.

License: Open-source. Free for all uses.

Rickshaw

Rickshaw is a JavaScript toolkit for creating interactive time series graphs. Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. image

You put the pieces together. It’s all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you like with techniques you already know.

License: Open-source. Free for all uses.

Cubism.js

Cubism.js is a D3 plugin for visualizing time series. You can use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube and other sources.image

Cubism fetches time series data incrementally: after the initial display, Cubism reduces server load by polling only the most recent values.

Cubism also scales in terms of perception: small multiples aligned by time facilitate rapid comparison. Cubism’s horizon charts make better use of vertical space than standard area charts, allowing you to see many more metrics at-a-glance and increasing the likelihood of discovery. In contrast, horizon charts reduce vertical space without losing resolution. Cubism is data-source agnostic. It has built-in support for Graphite and Cube, and can be readily extended to fetch data from other sources.

License: Open-source. Free for all uses.

Plottable.js

Built on top of D3, Plottable gives you a set of flexible, premade components that you can combine and rearrange to build charts. image

Because Plottable handles layout, sizing, and positioning, Plottable charts are easier to create and more reusable than charts built only with D3. And, since Plottable Components are powered by D3, the flexibility of D3 is still available. All Plottable components are usable on their own, so you can take small pieces to add to existing charts, or create charts entirely with Plottable.

License: Open-source. Free for all uses.

Canvas.js

Like the name suggests, Canvas.js is an HTML5 – JavaScript charting library based on the Canvas element. Canvas allows you to create rich charts that are completely responsive and display well across device types.image

CanvasJS supports 30 different types of Charts and renders across devices including iPhone, iPad, Android, Mac & PCs. This allows you to create rich dashboards that work across devices without compromising on maintainability or functionality of your web application. Graphs include several good looking themes and are 10x faster than conventional Flash / SVG based Charting Libraries – resulting in lightweight, beautiful and responsive dashboards.

It has simple & intuitive Charting API in JavaScript. CanvasJS can render 100,000 Data-Points in just a few hundred milliseconds! A perfect fit if you are looking for High Performance HTML5 Charting Library.

License: Free for non-commercial, paid for commercial uses.

ReCharts

ReCharts is a chart library built with React and based on the D3 charting library. It is redefined to make thing easy for React lovers, as you can write charts in your React web applications seamlessly.image

Recharts is very much lightweight and renders using SVG elements for creating sensational charts. It doesn’t have a lengthy documentation, as it is straight to the point and also easy to get solutions to issues when you face a brick wall.

License: Open-source. Free for all uses.

TauCharts

TauCharts is one of the most flexible JavaScript charting libraries out there. It is also D3 based and is a data-focused JavaScript charting library that allows for improved data visualization.image

Talking about its flexibility, TauCharts allows for easy access to their API. Giving users the opportunity to seamlessly map and visualize data to get more amazing insights. It is not just flexible. It also renders the charts pretty fast and is easy to learn.

License: Open-source. Free for all uses.

FusionCharts

FusionCharts brings in one of most comprehensive javascript libraries with over 90 charts and 900 maps – all ready for use out of the box. They boast of the best looking charts in the industry, and back it up with a powerful reporting experience through their dashboards that help present a bird’s eye view across business functions.
FusionCharts is compatible across devices from PCs and Macs, to iPhones and Android tablets; and they go the extra mile to ensure cross browser compatibility, even on IE6!image

They’ve also covered all bases when it comes to formats –  both JSON and XML data formats are accepted; rendering can be via HTML5/SVG or VML and charts can be exported in PNG, JPG or PDF format. FusionCharts extensions make it easy to integrate with any technology of your choice including jQuery, AngularJS, PHP and Rails.

Overall, FusionCharts has just about every feature and format you could need to create beautiful, insightful charts for some serious business analysis. And the best part is the free trial that you can download and use, with no restrictions.

License: Free for non-commercial, paid for commercial uses.

RGraph

RGraph is last but not least in our list. It is another beautiful data visualization library that can make your datasets come alive as colorful charts and graphs across your webpages. You can use more than 60 types of free charts with 2D and 3D options.image

RGraph offers both SVG charts and canvas charts. There are multiple ways to import your data (eg Google Sheets, CSV files & AJAX).

Rich documentation covers over 650 examples and there is active support to get you started.

License: Open-source. Free for all uses.

Just to let you know, we use RGraph and jQuery Sparklines in our TotalSheets. There will be possibility to include other libraries in the future.