Stacked Bar + Line chart angular library

6
votes

Is there any angularjs library that can draw a chart with stacked bars + lines? Like this: enter image description here

I'm looking for any library that supports this, with angular directives. I've found angular-nvd3-directives, that supports multicharts (combined chart types), but I don't think it supports bar stacking, only grouping.

I know that these questions are not well suited to SO, I'm looking for ANY, ONE, lib, not recommendations. (also it has to be free for commercial use)

2
angularjsangularjs-nvd3-directivesangular-nvd3
Just get highchart and wrap the lib into your own directive.. easier and more efficient way imho. or use github.com/pablojim/highcharts-ng – Pierre Gayvallet

2 Answers

7
votes

The ZingChart-AngularJS directive exposes the entire ZingChart library, which supports mixed charts. It's free for commercial use. I made a demo on CodePen of what you're looking for.

Here's what your JS would look like: 

var app = angular.module('myApp', ['zingchart-angularjs']);

app.controller('MainController', function($scope) {
  $scope.myJson = {
    "type": "mixed",
    "background-color": "white",
    "plot": {
      "stacked": true
    },
    "series": [{
      "type": "bar",
      "values": [25, 30, 15, 20, 25],
      "stack": 1,
      "background-color": "#4372c1",
      "hover-state": {
        "visible": false
      },
    }, {
      "type": "bar",
      "values": [20, 10, 30, 25, 15],
      "stack": 1,
      "background-color": "#ea4204",
      "hover-state": {
        "visible": false
      },
    }, {
      "type": "line",
      "values": [25, 30, 15, 20, 25],
      "line-color": "#38408c",
      "marker": {
        "background-color": "#38408c",
        "border-color": "#38408c"
      },
      "hover-state": {
        "visible": false
      }

    }, {
      "type": "line",
      "values": [25, 30, 15, 20, 25],
      "line-color": "#38408c",
      "marker": {
        "background-color": "#38408c",
        "border-color": "#38408c"
      },
      "hover-state": {
        "visible": false
      },
    },]
  };
});
2
votes

angular-nvd3 supports this. All you have to do is set bars1.stacked=true and bars2.stacked=true

http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview

$scope.options = {
  chart: {
    type: 'multiChart',
    ...
    bars1: {stacked:true},
    bars2: {stacked:true},
    ...
    };
  }
}