How to set chart height with ng2 charts

Question

How to set graph height using ng2 graphs ? I am doing a line chart, just like a demo on ng2-charts.

I was looking for documentation for ng2-charts and chart.js . In chart.js, it looks like you have set the height property of the canvas element, for example <canvas height="400">, but this element is hidden by the ng2-charts component.

Answer 1

Figured it out.

If the parameters are set responsive: true, and maintainAspectRatio: falseyou can set the height of the css property of the element <base-chart>.

Answer 2

Just set the height property of baseChart.

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

Answer 3

 <canvas   baseChart
       height="40vh" width="80vw"
       [data]="doughnutChart.data"
       [labels]="doughnutChart.label"
       [chartType]="doughnutChartType"
       (chartHover)="chartHovered($event)"
       (chartClick)="chartClicked($event)">
    </canvas>

Answer 4

To specify the height or width, you need to use a wrapper <div><div/>element around the element <canvas><canvas/>and then the div element should be styled using the style of the relative position, as well as the height and width with reference to the size of the viewing port (browser window size).

It will look like this:

<div class="chart-container" style="position: relative; height:50vh; width:50vw">
      <canvas baseChart
        -----chart property binding here------
      </canvas>
</div>