Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng2-charts - How to label y axis?

Unable to figure out how to label y axis using ng2-charts. Documentation only seems to have info on labelling x axis and using charts.js method directly yields no result.

Form 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>
like image 433
reCursed Avatar asked Jul 11 '19 01:07

reCursed


People also ask

How do you label the Y axis?

The proper form for a graph title is "y-axis variable vs. x-axis variable." For example, if you were comparing the the amount of fertilizer to how much a plant grew, the amount of fertilizer would be the independent, or x-axis variable and the growth would be the dependent, or y-axis variable.


2 Answers

ng2-charts is a wrapper angular library around the original chart.js library.

The documentation in chart.js is more detailed: https://www.chartjs.org/docs/latest/charts/bar.html

how to label y axis using ng2-charts

In chart.js, y-axis's ticks are determined automatically based on the data you have pushed into ChartDataSets[]

E.g. max y-axis value will be 99

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

To control the appearance of y-axis's ticks, refer this documentation: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

So if you wish to control the tick's stepSize to be increment of 2 you can do something like:

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

If you want to set the maximum y-axis tick label to be always 100, you will define your options like this:

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

To label your y-axis:

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
};
like image 92
terahertz Avatar answered Oct 17 '22 17:10

terahertz


This should help, don't forget to set "display:true" for each. It works for me

ChartOptions: any = {
 responsive: true,
 scales: {
  yAxes: [
   {
    display: true,
    scaleLabel: {
     display: true,
     labelString: "Number of Reads",
    },
   },
  ],
  xAxes: [
   {
    scaleLabel: {
     display: true,
     labelString: "Date",
    },
   },
  ],
 },
};
like image 3
Prateek Parhi Avatar answered Oct 17 '22 17:10

Prateek Parhi