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

Question

How do I set a chart's height using ng2-charts? I'm making a line chart, just like the demo on the ng2-charts site.

I've searched the documentation for ng2-charts and chart.js. In chart.js it looks like you set a height property on the canvas element like <canvas height="400">, but that element is obscured by the ng2-charts component.

Answer 1

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.

Answer 2

Just set a height property of baseChart.

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

Answer 3

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.