Javascript Chart Libraries

In this article we will give you a quick overview about open source javascript chart libraries (mostly D3 based). Just leave a comment if you miss one.

If you have to create a very custom/special type of chart I would always recommend to use just D3 or Raphael without a wrapper library.

NVD3

nvd3 chart image

NVD3 uses the convention of reusable charts for D3 from Mike Bostock. Currently NVD3 is getting a major refactoring. You can check out the new version in the refactor/2.0.0-dev branch. Unfortunately there is no API documentation but they are providing commented and editable examples. If you are working with Angular, you can use the Angular NVD3 directive.

Update: There is a fork of NVD3 that is actively being maintained: https://github.com/liquidpele/nvd3

  • Examples
  • No documentation
  • Dependencies: d3
  • License: Apache v2

C3

c3 chart

C3 is also a D3 based reusable chart library. With C3 it is easy to combine different chart types and the charts are very good customizable. Sadly the API is not fully documented but there are several code examples.

metricsgraphics

metricsgraphics chart

Metricsgraphics is optimized for displaying time-series data and was developed at Mozilla. +1 for the dark theme, -1 for the jquery dependency (there is already a ‘no jquery’ pull request).

DC

DC chart

DC uses crossfilter for filtering and grouping heavy amounts of data. The library is also a good choice if you want to use charts in order to control other visualizaions. As you can see in the example the charts are for displaying data but also for controlling the state of the current view.

dimple

dimple chart

Dimple is especially for business analytics. It has an academic look and feel and a lot of posibilites for combining different chart types in one diagramm.

Epoch

epoch chart

Epoch has different types of charts for displaying real time data and basic charts.

D3xter

dexter chart D3xter is a small chart library with four different types of charts. * [Examples](https://github.com/NathanEpstein/D3xter#basic-examples-no-configuration) (code only examples) * No documentation * Dependencies: [d3](https://github.com/mbostock/d3) * License: MIT ### [Chartist](http://gionkunz.github.io/chartist-js/) {% asset_img chartist.png chartist

Chartist is based on the snap.svg library. It is responsive and there are wrapper libraries for angular (ng-chartist), react (react-chartist), meteor (meteor-chartist-js) and wordpress (tablepress_chartist).

  • Examples
  • Documentation
  • Update: Dependencies: No dependencies
  • License: DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE v2

Chart.js

Chart.js chart

Chart.js is the only canvas only based library in this list. There are 6 types of charts you can use and it’s responsive.

Sparklines

sparkline chart

Sparkline creates tiny word-sized charts with the help of jquery. So if you need inline charts to upgrade/describe your text parts, this is a good library.

Update: There is another sparkline lib called sparky. It is based on raphael and has a strange structured repo.

Taucharts

taucharts chart

Taucharts has “a focus on design and flexibility” as they say. A nice feature, I often missed in other libraries, is the possibilty to add trendlines to a certain chart as you can see on the screenshot above.

The charts are taken from my frontend stuff list.

comments powered by Disqus