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.

score 54 · Accepted Answer · answered Jul 20 '16 at 22:29

54

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.

answered Jul 20 '16 at 22:29

BrandonReid

1,264
1
13
17

2

It must be in options attribute. – Natanael Jan 21 '17 at 20:58
1

You can find a explanation for this in [Chart.js documentation](http://www.chartjs.org/docs/latest/general/responsive.html#responsive-charts) – Charmin Oct 26 '17 at 09:04
responsive is also a property for pie chart ? if not how can I set height for pie chart ? – k11k2 May 14 '18 at 06:01
Where in the hierarchy of configuration do these fit? The documentation is poor regarding placing parameters in context. – Jason K. Oct 23 '22 at 23:14

score 14 · Answer 2 · answered Jul 16 '17 at 10:06

14

Just set a height property of baseChart.

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

answered Jul 16 '17 at 10:06

Dennis

151
1
3

score 10 · Answer 3 · edited Jul 05 '21 at 08:39

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.

score 5 · Answer 4 · answered Nov 06 '17 at 10:56

just set height and width after basechart

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

score 2 · Answer 5 · edited Jun 25 '19 at 06:38

To provide the height or width you need to use a wrapper <div><div/> element around the <canvas><canvas/> element and the div element should then be decorated with relative position style and the height and width with reference to the view port size(browser window size).

This would look like below:

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

score 1 · Answer 6 · answered Sep 28 '20 at 04:38

1

Set the chart options to be responsive

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

The view width can be set in CSS

.myclass {
   width: 100vw;
 }

answered Sep 28 '20 at 04:38

Interlated

5,108
6
48
79

score 0 · Answer 7 · answered Dec 14 '19 at 16:40

0

setting

<canvas style="width: inherit;height: inherit;"

will adapt according to the chart's parent container size

answered Dec 14 '19 at 16:40

e03050

1,392
15
12

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

7 Answers7