How to create a group of StackedBar using angular-chart.js [duplicated]

Viewed 6725

I am using angular-chart.js, but I found problems to acheive a group of StackedBar, like this : enter image description here

This is in below my code:

$scope.labels = [];
            $scope.labels = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
             "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre"];
            $scope.type = "StackedBar";
            $scope.series = ['Series A', 'Series B'];
            $scope.options = {
                scales: {
                    xAxes: [{
                        stacked: true,
                        ticks : {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        ticks : {
                            beginAtZero: true
                        }
                    }]
                }
            };
            $scope.data = [
                [65, 59, 90, 81, 56, 55, 40],
                [28, 48, 40, 19, 96, 27, 100]
            ];
            $scope.colors = [];
            $scope.colors = ['#00ADF9'];

For the html code:

<canvas class="chart chart-bar" chart-type="type" chart-data="data"
                            chart-labels="labels" chart-series="series" chart-options="options"
                            chart-colors="colors">
                    </canvas>

So I get this result with that code: enter image description here

Please any help

3 Answers

The latest version of angular-chart.js uses Chart.js version 2.3.0. The 'stack' datasetOverride option only became available in Chart.js version 2.5.0.

There is a PR open in angular-chart.js to upgrade the Chart.js version, but it doesn't appear that it is being actively maintained.

So, the stack option to group bars separately will not work if trying to use this in angular-chart.js

Related