7

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>
reCursed
  • 165
  • 1
  • 3
  • 14
  • 1
    Can you please add an image showing how exactly do you want it to look along with some sample data to work with? – SiddAjmera Jul 11 '19 at 01:25

2 Answers2

14

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
};
terahertz
  • 2,915
  • 1
  • 21
  • 33
  • Sorry everyone, I don't think I was clear on what I was talking about. As an example: https://www.chartjs.org/samples/latest/legend/positioning.html If you look at these charts, the word 'Value' appears beside the y axis and 'Month' below the x axis. This is what I'm after. – reCursed Jul 11 '19 at 03:39
  • ahh, that makes more sense now. I have edited my answer. You were missing `scales: {}` property. Have a look at https://www.chartjs.org/docs/latest/axes/labelling.html for additional properties to edit your label – terahertz Jul 11 '19 at 03:53
  • I have added ChartOptions type to your barChartOptions. It will help you to check if your properties object is correct before you compile. If you're using Visual Studio Code, you can press ctrl + space for suggestions too. – terahertz Jul 11 '19 at 03:56
  • Ahhh! Beautiful :) Thanks very much. Obviously I should be paying attention to Canvas.js docs rather than ng2-Charts! – reCursed Jul 11 '19 at 04:08
  • If One wants to have dynamic label based on the condition what would be the syntax for that. scaleLabel: { display: true, labelString: title // based on the condition } – Manhar Sapra Sep 10 '20 at 07:44
3

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",
    },
   },
  ],
 },
};
Prateek Parhi
  • 31
  • 3