How can I set the height of a chart with ng2-charts

In the ts file, declare chartOptions as ::

chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
}

Likewise, In html file property bind [options]="chartOptions" and set required height, width in div tag

<div style="display: block; width: 500px; height: 400px;">
  <canvas
      baseChart
      [chartType]="'line'"
      [datasets]="chartData"
      [labels]="chartLabels"
      [colors]="lineChartColors"
      [options]="chartOptions"
      [legend]="true"
      (chartClick)="onChartClick($event)">
  </canvas>
</div>

This will work.


Just set a height property of baseChart.

<canvas baseChart height="300" ...></canvas>

Figured it out.

If responsive: true and maintainAspectRatio: false settings are set, you can then set the css height property of the <base-chart> element.