how to stack series in nvd3 multibar angularjs directive

Question

i want to create a multiple bar chart with nvd3 angularjs directive by cmaurer (nvd3 directive link) but the problem is that i need to stack some series and there is a strange bug. here is my data:

 $scope.exampleData = [
                {
                    "key": "Monto Inicial",
                    "values": [[0, $scope.planAhorro.MontoInicial]]
                }, {
                    "key": "Monto Periodico",
                    "values": [[0, $scope.planAhorro.MontoPeriodico]]
                }, {
                    "key": "Total Sueños",
                    "values": [[1, $scope.planAhorro.Valor]]
                }];

i want to get 2 bars with the values of $scope.planAhorro.MontoInicial and $scope.planAhorro.MontoPeriodico stacked, and the another bar with the value $scope.planAhorro.Valor alone, but the thing is the first 2 stack well and the third stack on top and i don't need it to stack!!

and here is the output:

http://es.tinypic.com/r/2yvjnkw/8

Rhettrhetta

Answer 1

Suppose you need to set up values for all range, in you case: for 0 and 1:

$scope.exampleData = [
            {
                "key": "Monto Inicial",
                "values": [[0, $scope.planAhorro.MontoInicial], [1, 0]],
                "color": "red" 
            }, {
                "key": "Monto Periodico",
                "values": [[0, $scope.planAhorro.MontoPeriodico], [1, 0]],
                "color": "green"
            }, {
                "key": "Total Sueños",
                "values": [[0, ], [1, $scope.planAhorro.Valor]],
                "color": "#0000FF" //blue
            }];

Here is a demo, but I use angular-nvd3 directive instead.

Precautionary

Thanks!!!! this was so helpful, can i ask you something else? how can i give different colors for every element in the serie, and not by serie – Rhettrhetta

just add keyword "color" to each json element in your exampleData array, like: [{"key": "...", "values": [...], "color": "red"}, ...]. I updated demo. – Precautionary

hi, thats a nice example but im trying to give a different color for every element in the serie, not the whole group, and in the page i found an attribute named barColor but i can't make it work, whanks in advance – Rhettrhetta

yea, barColor actually does this. One way is to use an array, like barColor: ["yellow", "blue"], see demo1. Another way is to use random colors, defined by the function like barColor: function(d,i){ ... return randomcolor }, see demo2. – Precautionary