CODEWITHSUNDEEP
angularng2-charts
BrandonReid
BrandonReid

Reputation: 1314

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

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.

Upvotes: 27

Views: 40755

Answers (7)

Saumyajit
Saumyajit

Reputation: 746

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.

Upvotes: 12

Interlated
Interlated

Reputation: 5926

Set the chart options to be responsive

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

The view width can be set in CSS

.myclass {
   width: 100vw;
 }

Upvotes: 1

e03050
e03050

Reputation: 1552

setting 

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

will adapt according to the chart's parent container size

Upvotes: 0

Ashish Dehariya
Ashish Dehariya

Reputation: 216

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>

Upvotes: 2

Arash
Arash

Reputation: 3688

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>

Upvotes: 5

Dennis
Dennis

Reputation: 151

Just set a height property of baseChart.

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

Upvotes: 14

BrandonReid
BrandonReid

Reputation: 1314

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.

Upvotes: 56

Related Questions