Stacked Bar + line chart angular library

Question

Is there any angularjs library that can draw a chart with stacks + rows? Like this:

I am looking for any library that supports this, with angular directives. I found angular -nvd3 directives that support multi-channel (combined chart types), but I don't think it supports string stacking, only grouping.

I know that these questions are not very suitable for SO, I am looking for ANY, ONE, lib, not recommendations. (It should also be free for commercial use)

Answer 1

The ZingChart-AngularJS directive provides the entire ZingChart library that supports mixed charts. It is free for commercial use. I made a demo on CodePen of what you are looking for.

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

Answer 2

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