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: