Format chart yaxis in thousands/millions

[Mohammad Hadadi]

Hi There,

In an Angular application, I am using chart component (<ejs-chart></ejs-chart>) and I want to format y axis in different units like hundreds, thousands, 10 thousands and millions dynamically. I do not want to touch series data. Is there a way to use something like chart.primaryYAxis.labelFormat to do so? I use common format like p2 and others to format y axis in other cases but I could not find a way to format the axis to the mentioned format (like 10,000,000 becomes 10 in y axis).

I appreciate if you show me a solution.

Thank you,

Mohammad

[Durga Gopalakrishnan]

Hi Mohammad, 

We have analysed your query. As of now, only below label formats are only supported for chart numeric axis. You can also customize axis labels using axisLabelRender event. We have prepared sample as per your requirement. Please check with below UG link and sample. 

UG https://ej2.syncfusion.com/angular/documentation/chart/numeric-axis/#label-format 

public axisLabelRender(args:IAxisLabelRenderEventArgs): void{ 

    if(args.axis.name == 'primaryYAxis' ){ 

        var value = parseInt((args.text).replace(',',''));          

        if(value >= 1000 && value <= 99999) 

        { 

            var num=(value / 1000);          

            args.text = (num).toFixed() + 'K';        

        } 

        //… 

     } 

} 

 

 

https://stackblitz.com/edit/angular-sux6yh-mmgmvl 

Regards, 

Durga G 

[Mohammad Hadadi]

Hi Durga,

Thanks for your perfect and quick reply.

I tried the code and it's what I need. One thing that I forgot to tell you and I apologies for that is that based on our system requirement, I need to reformat tooltip values as well. After you sent the code, YAxis is working fine and I need to set tooltips like if I am formatting 24,256 to thousands it becomes 24K in y axis and in tooltip as well.

I appreciate if you show me a solution.

Thank you,

Mohammad Hadadi

[Durga Gopalakrishnan]

Hi Mohammad, 

We have analysed your query. We suggest you to use tooltipRender event to change the tooltip text of chart series point. We have modified sample as per and attached for your reference. Please find the sample below. 

public tooltipRender(args: ITooltipRenderEventArgs): void{ 

      let textCol = args.text.split(":"); 

      let str1 = textCol[1].replace('<b>', ''); 

      let str2 = str1.replace('</b>', ''); 

       var value = parseInt((str2).replace(',','')); 

       if(value >= 1000 && value <= 99999) 

        { 

            var num=(value / 1000);          

            args.text = textCol[0] + ": <b>" +(num).toFixed() + 'K</b>';        

        } 

       //…. 

}; 

https://stackblitz.com/edit/angular-sux6yh-zd1hnk 

Please revert us, if you have any concerns. 

Regards, 

Durga G 

[Mohammad Hadadi]

Hi Durga,

I tried the code. It's working and what I need.

Thank you for your help.

Mohammad Hadadi

[Durga Gopalakrishnan]

Hi Mohammad, 

 

Most welcome. Please get back to us, if you need any further assistance. 

 

Regards, 

Durga G