chartjs / ng2-charts charts does not work properly in display flex

In my Angular app, I use chart.js and ng2-charts to create some charts. I want to have two doughnut charts side-by-side horizontally, that can grow and shrink equally when the browser window is resized. I have used bootstrap flex classes as the following:

"charts.component.html"

<div class="d-flex">
<div class="flex-fill">
<canvas
baseChart
[data]="chartData"
[options]="chartOptions"
[type]="'doughnut'"
>
</canvas>
</div>
<div class="flex-fill">
<canvas
baseChart
[data]="chartData"
[options]="chartOptions"
[type]="'doughnut'"
>
</canvas>
</div>
</div>


"charts.component.ts"

import { Component } from '@angular/core';
import { BaseChartDirective } from 'ng2-charts';

@Component({
selector: 'app-charts',
imports: [BaseChartDirective],
templateUrl: './charts.component.html',
styleUrl: './charts.component.css',
})
export class ChartsComponent {
chartData= {
labels: [
'Total orders',
'Watch list',
'Return requests',
'Delivered orders',
],
datasets: [
{
label: '# of Orders',
data: [10, 20, 7, 25],
borderWidth: 1,
},
],
};

chartOptions= {
scales: {
y: {
beginAtZero: true,
},
},
};
}


The charts do not take equal width and do not shrink their size when the browser window is shrunk:

Continue reading...