Stacked Bar + Line chart angular library

Question

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

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)

Just get highchart and wrap the lib into your own directive.. easier and more efficient way imho. or use https://github.com/pablojim/highcharts-ng — Pierre Gayvallet, Nov 20 '15 at 13:42

score 7 · Accepted Answer · answered Nov 23 '15 at 19:17

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
      },
    },]
  };
});

score 2 · Answer 2 · answered Jan 25 '16 at 08:50

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},
    ...
    };
  }
}

Stacked Bar + Line chart angular library

2 Answers2