Home forums Using CanvasJS charts in ionic 2 y-axis labels changes

This topic contains 8 replies, has 3 voices, and was last updated by  Suyash Singh 12 hours, 9 minutes ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #17496

    Prabhjot
    Member

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

    #17501

    Vishwas R
    Keymaster

    @prabhjot,

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


    Vishwas R
    Team CanvasJS

    #17506

    Prabhjot
    Member

    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

    #17514

    Suyash Singh
    Moderator

    @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

    #17627

    Prabhjot
    Member

    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.

    #17636

    Suyash Singh
    Moderator

    @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

    #17637

    Prabhjot
    Member

    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.

    #17638

    Prabhjot
    Member

    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>

    #17669

    Suyash Singh
    Moderator

    @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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.