How do I make many ChartJS charts on the same page to have the same height and also even column width?

by

👍:1

What I did was, add [ngStyle] to the DOM element.

<canvas [ngStyle]="canvasStyle" baseChart [datasets]="barChartData" [options]="barChartOptions" [plugins]="barChartPlugins"
      [legend]="barChartLegend" [labels]="barChartLabels" [chartType]="barChartType">
    </canvas>

Then from typescript I set the height and width:

private setChartHeight(): void {
    const width = this.factorData.length * 5;
    this.canvasStyle = {
        height: '30vh',
        width: `${width}vw`,
    };
}

It is important though, that you set the maintainAspectRatio: false attribute so that you can set both the height and width. Of course if that’s your desire. If you only want to set the chart width you can set it to true.

Leave a comment