What's your favorite charting library?

ionic-v1
41

C3 looks incredible, based on how charts should be on a mobile device: light weight. I’m using it in a factory based system where they’re running ancient computers over network and it still looks great.

We looked and even attempted to use Chart JS but (As of a few months ago I believe) it was inactive for a long time and the resources weren’t really there. Maybe we looked in the wrong spots? Haha.

42

I am surprised that there was only one mention of the morris.js chart library? I have used it and I reckon, it is pretty useful. I have written a blog post about it


I have explained as to why I think it was a better choice to use that instead of the Google Visualisation library

43

D3 and C3 are more complex in terms of data binding, but that provides greater control in my opinion. If the goal is to support a charting library so that it provides the most coverage of features, requirements and capability then D3/C3 should be used. It’s well documented/supported and lends itself perfectly to a wide range of browsers and as Ionic only supports either Safari Webkit and Chrome webkit based browsers this shouldn’t be a problem.

I used it on a recent project, although not strictly based in Ionic (we did use Ionic components) it’s worked incredibly well across a wide range of devices and browsers. Take a look at the dials for Verto, which uses D3 and SVGs to display political alignment in realtime based off user decisions.

44

I’ve enjoyed using http://www.chartjs.org/ in my most recent Ionic project.

45

I vote for D3.js / C3.js

46

A few days ago my vote would have definitely been chart.js – I’ve been able to implement it into my app very easily and get some slick looking charts! Unfortunately, I’ve discovered that chart.js doesn’t play nicely with ‘time series’ type charts. If you have a chart that has many data points, but only a couple labels (such as info from the last 7 days, yet many instrument readings each day), chart.js doesn’t support this.

This is pretty much a deal-breaker for many scientific and data-intensive charting needs.

47

Some posts ago it was brought up that one library uses svg and the other canvas. I have not researched svg accessibility, but as it uses the DOM my guess it is possible to attach aria fields to describe svg charts for screenreaders like VoiceOver on iPhone. A canvas graph is just pixels so it will probably be harder to make accessible.

48

So I’ve been building something like this for my work. We’ve settled on C3, due to the larger feature set needed and clean documentation. ChartJS does not meet our needs, and while it could be a good simple chart it does not provide enough. Our use case so far is pretty focused, but here is an example of what I have working at the moment. C3 has a lot of options for styling that could be easily exposed. NVD3 is also showing recent activity as a project, but is missing documentation and clarity on if it is stable at the moment.

<chart type="timeseries" title="Stock Price">
  <chart-series title="x" data="times"></chart-series> <!-- This is the x axis timeseries values -->
  <chart-series type="line" title="Price" data="price" color="orange"></chart-series>
  <chart-series type="bar" title="Volume" data="volume" color="gray"></chart-series>
</chart>

I prefer the ability to have as much declared in the markup as possible, but also should mention that it could be advantageous to provide a configuration object instead. So this would also work, in case you loaded a chart definition from an API or needed it to be more concise.

$scope.chart = {
  title: 'Stock Price',
  type: 'timeseries',
  series: [
    { title: 'x', data: $scope.x },
    { title="Price", type: 'line', data: $scope.price, color: 'orange' },
    { title="Volume", type: 'bar', data: $scope.volume, color: 'gray' },
  ]
};

<chart config="chart"></chart>
49

I tried chartjs, It was not working great with some android mobiles. So I tried Highcharts, Its really awesome. Specially with 3d effects. So nice http://www.highcharts.com/demo/3d-column-null-values

50

Hi @CT14_IT,

I have been trying to use ng-google charts to visualise data from ngCordova device motion plugin dynamically in real time but it doesn’t seem to update with time. Do you know if dynamic data values works with NVD3 directives?

51

@max Have you guys decided on a chart yet? I’m working on integrating charts now and would prefer to work with one that you guys will support. Thanks.

52

amcharts is awesome and very well made ! new favorite. http://www.amcharts.com/

53

Hey sorry for the delayed reply, yes it works but I’ve needed to call $scope.$apply() for the changes to be reflected in the template.

54

As there are number of charting libraries available in market to create interactive charts. Koolchart, Google free chart, Highchart are widely used charting libraries
Thanks

55

can’t believe nobody mentioned http://plottablejs.org i just started using it. based on d3, it has the cleanest api ive seen, super modular and has a layout engine.
this video by the maker does a good job comparing with the other libraries: https://youtu.be/_A_FdbTkp9c

1 Like
56

@drewes, Are you using visjs? I have integrated visjs for timelines - while it draws the timeline perfectly, it crawls when it comes to panning and zooming even for a small data set. Do you have any tips?

It’s very fast in the desktop browsers but horrible when it comes to mobile

thanks

57

May be you are familiar with chart.js so please tell me how to detect chart is completely rendered on DOM by which I want to close loading icon.

58

KoolChart is one of my favorits. It covers a lot of chart types and developer friendly. Among the charts supported by KoolChart, I especially like this Wing Chart, http://www.koolchart.com/gallery/wing_chart/bar_stacked

59

Any news about which one is the library chosen?

60

there is angular wrapper around Chart.js