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

Question

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

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:

Please any help

pass type as `chart-bar`. check this http://jtblin.github.io/angular-chart.js/#top — Sibiraj, May 29 '17 at 10:42
Here it is:http://plnkr.co/edit/NznhWurqSgzhdzFNIu2M?p=preview — Ghizlane Lotfi, May 29 '17 at 11:17

score 2 · Answer 1 · answered May 29 '17 at 11:35

2

Change stacked value for x-axis to false. http://plnkr.co/edit/fboi5UVLyBtS9ozo2QaR?p=preview. is this what you are looking?

$scope.options = {
                scales: {
                    xAxes: [{
                        stacked: false, // change to false
                        ticks : {
                            beginAtZero: true
                        }
                    }],
                    yAxes: [{
                        stacked: false,
                        ticks : {
                            beginAtZero: true
                        }
                    }]
                }
            };

answered May 29 '17 at 11:35

Sibiraj

4,486
7
33
57

Yes thanks but also for each bar, I want to have a stacked bar. a group of stacked bar – Ghizlane Lotfi May 29 '17 at 11:36
If I am getting that correct. You are looking for a mixed graph. @GhizlaneLotfi – Sibiraj May 29 '17 at 11:37
let say that, how can I do it – Ghizlane Lotfi May 29 '17 at 11:39
I checked that but angular-charts does not support that as they only allow array inputs. @GhizlaneLotfi – Sibiraj May 29 '17 at 12:08
Thanks @Sibi Raj, I will try to find a solution or to change angular-charts – Ghizlane Lotfi May 29 '17 at 12:19
Meanwhile, you can check. data-override options provided by angular-charts. I may help. @GhizlaneLotfi – Sibiraj May 29 '17 at 12:26
Yes I checked it, here is my new code but still can't do it http://plnkr.co/edit/MzcrykfcxplUZOyhU8wZ?p=preview – Ghizlane Lotfi May 29 '17 at 14:16
to use data-override. you must use latest angular version http://plnkr.co/edit/Bs61jkGwFI9YiwIDjPXN?p=preview – Sibiraj May 30 '17 at 06:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/145423/discussion-between-ghizlane-lotfi-and-sibi-raj). – Ghizlane Lotfi May 30 '17 at 08:25

score 1 · Answer 2 · answered Feb 01 '19 at 20:26

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

score -1 · Answer 3 · answered May 30 '17 at 14:45

I fix this issue, by changing my code :

$scope.labels = ["Janvier", "Février", "Mars", "Avril" , "Mai", "Juin",
                         "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Décembre" ];
                        $scope.type = "StackedBar";
                        $scope.series = ['Vital épargne', 'Prévoyance groupe'];
                        $scope.options = {
                            scales: {
                                xAxes: [{
                                    stacked: true,
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }],
                                yAxes: [{
                                    stacked: true,
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        };

 $scope.data = [
                           [59, 80, 81, 56, 55, 40, 65],
    [65, 59, 90, 81, 56, 55, 40],
    [60, 59, 80, 81, 56, 55, 40]
                        ];
                        $scope.datasetOverride = [
                            {
                                label: "Vital épargne: réalisé",
                                backgroundColor: "rgba(99,255,132,0.2)",
                                data: [65, 59, 90, 81, 56, 55, 40],
                                stack: 1
                            },

                            {
                                label: "Prévoyance groupe: réalisé",
                                backgroundColor: "rgba(99,132,255,0.2)",
                                data: [59, 80, 81, 56, 55, 40, 65],
                                stack: 2
                            },
                            {
                                label: "Prévoyance groupe: estimé",
                                backgroundColor: "rgba(255,99,132,0.2)",
                                data: [60, 59, 80, 81, 56, 55, 40],
                                stack: 2
                            }
                        ];

Here is the result of it :

check my plunker solution

the link provided for the sample doesn't look like the output displayed or requested by the person — Nidhin Prathap, Dec 18 '18 at 12:10
@NidhinPrathap I am the person who added the request and I answered my request — Ghizlane Lotfi, Dec 28 '18 at 15:10
i am asking if you are have the solution bcz the solution that you mentioned doesn't work — Nidhin Prathap, Dec 29 '18 at 18:46

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

3 Answers3