Frederic priority asked 5 years ago


I'm looking for a way to make stacked bar charts like the following: https://www.chartjs.org/samples/latest/charts/bar/stacked.html

This does not seem possible with the actual directives. Am I wrong? If not is it planned in a future version? Thanks in advance.


Damian Gemza staff answered 5 years ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.0.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes
Tags