ng2-charts - Comment étiqueter l'axe des y ?

Question

Je n'arrive pas à trouver comment étiqueter l'axe des y avec ng2-charts. La documentation ne semble contenir que des informations sur l'étiquetage de l'axe des x et l'utilisation directe de la méthode charts.js ne donne aucun résultat.

Formulaire component.ts :

  public barChartOptions = {
    scaleShowVerticalLines: false,
    maintainAspectRatio: false,

    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Frequency Rate'
      }}]
    //responsive: true
  };

HTML :

<script src="node_modules/chart.js/src/chart.js"></script>

<!--<button mat-button mat-raised-button color="primary" (click)="populate_data()">Update</button>-->

<div>
  <canvas baseChart class="chart" height ='450'

        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType">

      </canvas>
    </div>

Answer 1

Ng2-charts est une bibliothèque angulaire enveloppante autour de la bibliothèque originale chart.js.

La documentation de chart.js est plus détaillée : https://www.chartjs.org/docs/latest/charts/bar.html

comment étiqueter l'axe y en utilisant ng2-charts

Dans chart.js, les ticks de l'axe des y sont déterminés automatiquement en fonction des données que vous avez introduites dans ChartDataSets[].

Par exemple, la valeur maximale de l'axe des y sera de 99.

public barChartData: ChartDataSets[] = [
    { data: [5, 1, 99], label: 'Series A' },
    { data: [6, 10, 45], label: 'Series B' }
];

Pour contrôler l'apparence des tics de l'axe des y, consultez cette documentation : https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

Ainsi, si vous souhaitez contrôler le stepSize du tick pour qu'il soit incrémenté de 2, vous pouvez faire quelque chose comme ceci :

yAxes: [{
   ticks: {
      stepSize: 2,
      beginAtZero: true
   }
}]

Si vous voulez que l'étiquette de l'axe des y soit toujours 100, vous définirez vos options comme suit :

yAxes: [{
   ticks: {
      max: 100
   }
}]

Pour étiqueter votre axe des y :

public barChartOptions: ChartOptions = { // import { ChartOptions } from 'chart.js'; 
   ...
   responsive: true,
   maintainAspectRatio: false,
   ...
   scales: { //you're missing this
      yAxes: [{
         scaleLabel: {
            display: true,
            labelString: 'Frequency Rate'
         }
      }]
   }//END scales
};

Answer 2

Cela devrait vous aider, n'oubliez pas de définir "display:true" pour chacun. Cela fonctionne pour moi

ChartOptions: any = {
 responsive: true,
 scales: {
  yAxes: [
   {
    display: true,
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
  xAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
 },
};