Topic: Stacked BarChart
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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