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>
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.
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
};
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",
},
},
],
},
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With