charts in ionic 2 y-axis labels changes

[Prabhjot]

How i change in bar-chart big values of y-axis labels to suffix k like 10,000 to 10K in ionic 2 ?
Thanks

[Vishwas R]

@Prabhjot,

You can add use labelFormatter to achieve this. Please check this jsfiddle.

—
Vishwas R
Team CanvasJS

[Prabhjot]

my js file

public getSalesAndPurchase() {

this._companiesService.getSalesAndPurchase(<any>localStorage.getItem(“org_id”), this.fromDate, this.endDate).subscribe(
data => {
this.data = <ResponseModel>data
if (this.data.success) {
this.salesAndPurchases = this.data.payload;
if(this.salesAndPurchases.stats!==undefined){
this.noRecord=false;
let income = [];
let expense = [];
this.salesAndPurchases = this.data.payload;
this.barChartData = [];
this.barChartLabels = [];
this.barChartColors=[
{
backgroundColor:’rgb(123, 190, 234)’,

},
{
backgroundColor:’#DE7D12′,

}
]
// axisY: {
// labelFormatter: addSymbols
// },
this.totalExpense = 0;
this.totalIncome = 0;
this.salesAndPurchases.stats.forEach(stat => {
this.totalIncome += stat.income == “” || stat.income == null ? 0 : parseFloat(stat.income);
this.totalExpense += stat.expense == “” || stat.expense == null ? 0 : parseFloat(stat.expense);
income.push(stat.income);
expense.push(stat.expense);

this.barChartLabels.push(stat.month);
});
this.barChartData.push({ data: income, label: ‘Income’ }, { data: expense, label: ‘Expense’ })
}
else{
this.noRecord=true;
}
} else {
this._toastService.presentToast(this.data.payload.message);
}
this.showBarChart = true;

}, error=>{
this.errorMessage = <any>error;
this._toastService.callError(this.errorMessage);

})
}

html file

<canvas baseChart *ngIf=”showBarChart && !noRecord” class=”chart base-chart” [colors]=”barChartColors” [datasets]=”barChartData” [labels]=”barChartLabels” [options]=”barChartOptions” [legend]=”barChartLegend” [chartType]=”barChartType” (chartHover)=”chartHovered($event)” (chartClick)=”chartClicked($event)”></canvas>

HOw i use label formatter in this ?? please help

[Suyash Singh]

@prabhjot,

We have gone through the code you have shared, but we were unable to find any CanvasJS chart options in it. Can you kindly share a link to a working sample project reproducing the issue that you are facing? This would help us understand your requirements properly & assist you better.

___
Suyash Singh
Team CanvasJS

[Prabhjot]

here is my html code

<canvas baseChart *ngIf=”showBarChart && !noRecord” class=”chart base-chart” [colors]=”barChartColors” [datasets]=”barChartData”
[labels]=”barChartLabels” [options]=”barChartOptions” [legend]=”barChartLegend” [chartType]=”barChartType” (chartHover)=”chartHovered($event)” (chartClick)=”chartClicked($event)”></canvas>

Js code
this.barChartOptions={
axisY: {
labelFormatter: {suffix: “K”}
},
};

i try to add suffix like this but it is not working. Plz help .

i want to add suffix K to yaxis label.

[Suyash Singh]

@prabhjot,

labelFormatter is a custom function whereas suffix is a property within the axis object. Using the labelFormatter as:

axisY:{
	labelFormatter: function ( e ) {
		return e.value + "K";  
	}  
}

should work fine in your case. You could also use suffix property within the axis to achieve the same. Please have a look at suffix.

___
Suyash Singh
Team CanvasJS

[Prabhjot]

my canvas tag is not taking options
suffix and label formatter both are not working.

public barChartOptions: any
= {
scaleShowVerticalLines: false,
responsive: true,

axisY: {
labelFormatter: function (e) {
alert(“k”)
return e.value + “K”;
}
}
};

here alert is also not working.

[Prabhjot]

is there need to define axisY anywhere else .I defined it in barChartoptions.Please check.

<canvas baseChart *ngIf=”showBarChart && !noRecord” class=”chart base-chart” [colors]=”barChartColors” [datasets]=”barChartData”
[labels]=”barChartLabels” [options]=”barChartOptions” [legend]=”barChartLegend” [chartType]=”barChartType”
(chartHover)=”chartHovered($event)”
(chartClick)=”chartClicked($event)”>
</canvas>

[Suyash Singh]

@prabhjot,

Can you please create jsfiddle reproducing the issue that you are facing, so that we can look into it & help you out?

___
Suyash Singh
Team CanvasJS