Comment puis-je définir la hauteur d'un graphique avec ng2-charts

Question

Comment définir la hauteur d'un graphique à l'aide de ng2-charts ? Je fais un graphique linéaire, tout comme la démo sur le site ng2-charts.

J'ai cherché dans la documentation des graphiques ng2 et chart.js . Dans chart.js, il semble que vous définissiez une propriété height sur l'élément canvas comme <canvas height="400">, mais cet élément est masqué par le composant ng2-charts.

Answer 1

Dans le fichier ts, déclarez chartOptions comme ::

chartOptions = {
responsive: true,
maintainAspectRatio: false,

}

De même, dans la propriété du fichier html, bind [options] = "chartOptions" et définissez la hauteur et la largeur requises dans la balise div

 <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>

Cela fonctionnera.

Answer 2

réglage

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

s'adaptera en fonction de la taille du conteneur parent du graphique