How to do Group Stacking available in ng2-charts?

Question

In the original Chart.js the Dataset Structure has a property called stack which can be used to stack group of data sets separately.

"stack: String The ID of the group to which this dataset belongs to (when stacked, each group will be a separate stack)"

I tried doing this in ng2-charts like so:

public barChartData: any[] =[
{
data: [],

label: 'Label',

type: 'bar',

stack: '1'
}
]

But didn't do anything.

Here is the dataset property from the ng2-charts: datasets (Array<{data: Array | number[], label: string}>) - data see about, the label for the dataset which appears in the legend and tooltips

Is there a work around for stacking groups separately?

Thank you!

Answer 1

You are right about what the documentation says, I'm trying to do the same thing. I tried this as an example, it should work, according to the link : http://www.chartjs.org/docs/latest/charts/bar.html in my .ts :

public barChartData:any[]=[
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A', stack: '1'},
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B', stack: '1'},
{data: [42, 24, 71, 14, 31, 49, 30], label: 'Series C', stack: '2'}
];

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];

public barChartOptions:any = {        
    responsive: true,
    scales:{
        xAxes:[{
            stacked:true
        }],
        yAxes:[{
            stacked:true
        }]
    }
  };
  public barChartType:string = 'bar';

in my HTML :

<canvas id="chart1" baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>

I found this sample of chart.js for grouped stack bar. Unfortunately it's plain JS : https://github.com/chartjs/Chart.js/blob/master/samples/charts/bar/stacked-group.html

EDIT : use my code above and do npm install [email protected] --save -> it worked directly for me

I found this solution while checking if stacks were checked when creating the bars. they weren't in my current version.

Answer 2

So I figured out that the way to do this is to un-stack the yaxis and then add the stack to the dataset property like so:

 {
                data: [],
                label: 'dataset 1',
                type: 'bar',
                yAxisID: 'bar-y-axis1',
                stack: '1'
            },
            {
                data: [],
                label: 'dataset 3',
                type: 'bar',
                yAxisID: 'bar-y-axis1',
                stack: '1'
            },
            {
                data: [],
                label: 'dataset 4',
                type: 'bar',
                yAxisID: 'bar-y-axis1',
                stack: '1'
            },