Formating Labels on a Bar Chart

[Javier]

Need help with formatting labels for my chart.

1) Is there a way so that the axis labels below read "2.0m" instead of 2000000.

2) How do I format the tooltip so that it formats the number to read "$5,722,591" instead of just 5722591

3) Is there a way to get the number inside or outside the bar so it's always there (also formatted).

I tried using a formatted value in my DataSource like this: { x: 'Fund 40', y: 5722591, text: '$5,722,591' },

but couldn't get that to work. Also tried using tooltipMappingName but that didn't seem to work either.

I was able to do all these things with the Pie Chart, but seem to be stuck on the Bar chart, so any help would be appreciated.

I'm using Typescript / JavaScript if that helps.

Thank you

[Durga Gopalakrishnan]

Hi Javier,

Greetings from Syncfusion.

We have analyzed your required scenario. Please check with the below suggestions.

                                                                

1) Is there a way so that the axis labels below read "2.0m" instead of 2000000.

We suggest you to use axisLabelRender event to customize the axis labels as per your requirement. Please check with the below snippet.

axisLabelRender:(args: IAxisLabelRenderEventArgs)=>{

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

                var num = args.value;

                if (num >= 1000000000) {

                    args.text = (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'B';

                 }

                 else if (num >= 1000000) {

                    args.text =(num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';

                 }

                 else if (num >= 100000) {

                    args.text =(num / 100000).toFixed(1).replace(/\.0$/, '') + 'L';

                 }

                 else if (num >= 1000) {

                    args.text = (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';

                 }   

            }

        },

UG : https://ej2.syncfusion.com/documentation/chart/axis-labels/#customizing-specific-point

2) How do I format the tooltip so that it formats the number to read "$5,722,591" instead of just 5722591

You can tooltipMappingName to display the custom tooltip text in chart series tooltip. Please check with below snippet.

series: [

            {

            dataSource: [

                    { x: 'Japan', y: 1710000, text: '$1,710,000' }

                    //..

            ],

            tooltipMappingName:'text',

            }

]

tooltip: {

            enable: true,

            format: '<b>${point.x} : ${point.tooltip}</b>'

        },

UG : https://ej2.syncfusion.com/documentation/chart/tool-tip/#format-the-tooltip

3) Is there a way to get the number inside or outside the bar so it's always there (also formatted).

We recommend you to map the text value provided for chart datasource using name property in data label.

                                

series: [

            {

            dataSource: [

                    { x: 'Japan', y: 1710000, text: '$1,710,000' }

                    //..

            ],

           marker:{dataLabel:{visible: true, name:'text'}}          

        }

]

 

UG : https://ej2.syncfusion.com/documentation/chart/data-labels/#text-mapping

Sample : https://stackblitz.com/edit/qydyq2

Please revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Javier]

 Thank you for your help.  Issue 1 and 2 have been resolved.  Seeing your code, I now know what I was doing wrong. 

Issue #3, I'm having inconsistent results.  Sometimes it shows it outside, sometimes its inside and sometimes it's not there at all.  Given my data, I think it make sense for it to always be outside (it won't always fit in the bar).  Is there a way to tell it to always show the value outside (next to the bar instead of inside the bar)?

Thank you again.

[Swetha Babu]

Javier,

By default, datalabel will be placed inside the bar and when there is no space, it will arrange smartly to avoid overlap, so only few labels are moved down. We suggest to place the data label outside the bar by setting the position property as Outer in the dataLabel property of the marker. We have created a simple Javascript application to demonstrate the same. Please find the below stackblitz link for your reference.

Sample link: https://stackblitz.com/edit/qydyq2-hzrct4?file=index.ts

Code Snippet:

dataLabel:{visible: true, name:'text', position: "Outer"}

Screenshot:

Kindly, revert us if you have any concerns.

[Javier]

Perfect.  Thank you.

[Swetha Babu]

Javier,

Most Welcome! Please get back to us if you need further assistance.