Stacked BarChart

Dear Frederic,

This is possible to achieve the Stacked layout in our Bar Chart.

Please take a look at the below code:

.html:

<div style="display: block">
        <canvas mdbChart
                [chartType]="chartType"
                [datasets]="chartDatasets"
                [labels]="chartLabels"
                [colors]="chartColors"
                [options]="chartOptions"
                [legend]="true"
                (chartHover)="chartHovered($event)"
                (chartClick)="chartClicked($event)">
        </canvas>
      </div>

.ts:

public chartType: string = 'bar';

  public chartDatasets: Array<any> = [
    { data: [65, 59, -157, 81, 56, 55, 40], label: 'My First dataset' },
    { data: [11, 12, -157, 13, 14, 15, 16], label: 'My Second dataset' },
  ];

  public chartLabels: Array<any> = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  public chartColors: Array<any> = [
    {
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 2,
    }
  ];

  public chartOptions: any = {
    responsive: true,
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [
        {
          stacked: true
        }
      ]
    }
  };
  public chartClicked(e: any): void { }
  public chartHovered(e: any): void { }

Best Regards,

Damian