We have different JavaScript charting libraries for visualising data in the form of beautiful, easy to understand, interactive charts. But when we say visualisation, mostly we remember familiar libraries like d3, nvd3, highcharts, fusion charts and so on. But there are some more libraries like dygraphs, charts.js, cytoscape.js where we can find better ways for visualisation. Let me list some JavaScript libraries I have explored with a short description.

D3: D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation.

NVD3: NVD3 is an attempt to build re-usable charts and chart components for. It lets you handle complex data sets and create advanced visualisations.

Highcharts: Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types. It provides an interface called Highcharts cloud for creating interactive charts online.

Fusion Charts: FusionCharts brings in one of most comprehensive JavaScript charting library, with over 90+ charts and 1000+ maps. It supports almost most of the browser and it has features like export charts in format like pdf, jpg.

C3.js: C3.js is another D3 based reusable chart library. C3 gives some classes to each element when generating, so you can define a custom style by the class and it’s possible to extend the structure directly by D3. C3 provides a variety of APIs and callbacks to access the state of the chart. By using them, you can update the chart even after it’s rendered.

Canvas.js: CanvasJS is an easy to use JavaScript & HTML5 Charts library built on Canvas element. It runs across devices including iPhone, iPad, Android, Windows Phone, Microsoft Surface, Desktops, etc. This allows you to create rich dashboards that work on all the devices without compromising on maintainability or functionality of your web application. CanvasJS comes with beautiful themes and is over 10x faster than conventional Flash and SVG Charts – resulting in lightweight, beautiful and responsive dashboards.

Raphael: Raphael is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library. Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Rickshaw: Rickshaw is a JavaScript toolkit for creating interactive time series graphs. Like few other libraries, Rickshaw is based on D3 library.

Cytoscape.js: Cytoscape is a highly optimized open-source graph theory /network library that can be used for graph analysis and visualization. Compatible with all modern browsers and fully (de)serializable via JSON. It also includes algorithms for automatic layout, set theory and graph theory, from BFS to PageRank.

dc.js: dc.js is a JavaScript charting library with native crossfilter support, allowing highly efficient exploration on large multi-dimensional datasets. It leverages d3 to render charts in CSS-friendly SVG format. Charts rendered using dc.js are data driven and reactive.

Chart.js: Chart.js is perfect for small projects. It provides 8 different chart types, each in its own module, so you can even load only the ones your project needs.

Vis.js: Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data. The library consists of the components DataSet, Timeline, Network, Graph2d and Graph3d.

Dygraphs: Dygraphs library produces interactive, zoomable charts of time series. It allows users to explore and interpret dense data sets.

Chartist.js: Chartist.js is a simple responsive charting library built with SVG. Chartist works with inline-SVG and therefore leverages the power of the DOM to provide parts of its functionality. This also means that Chartist does not provide it’s own event handling, labels, behaviors or anything else that can just be done with plain HTML, JavaScript and CSS.

Flot: Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

n3-charts: n3-charts is build on top of D3. If you want to create simple and interactive line/pie charts for AngularJS application, then this library can be preferred. If you need more chart types, this may not be your thing. For details, you can check the github url, https://github.com/n3-charts.

Anychart: AnyChart is a lightweight and robust JavaScript charting solution with great API and documentation. The chart types and unique features are numerous, the library works easily with any development stack.

Thanks for reading this post. You can continue reading the post here

Categories: Visualization

1 Comment

JavaScript Charting libraries (part 2) – Rilwan's Blog · July 5, 2018 at 12:17 am

[…] my previous post, we saw a list of JavaScript libraries for charts with a short description. I have explored some […]

Leave a Reply

%d bloggers like this: