How to format a label of NumericAxis in my barChart?

[Alvaro Corral]

Hi,

I want to show my BarChart wit the SecondaryAxis with  thousands in this format: 0, 5k, 10k, etc.

My Code in XAML is this:

 <chart:SfChart.SecondaryAxis>

                            <chart:NumericalAxis Interval="5000"

                                                 Maximum="15000"

                                                 Minimum="0"

                                                 ShowMajorGridLines="false" />

                            <chart:ChartAxisLabelStyle LabelFormat="##K" />

                        </chart:SfChart.SecondaryAxis>

But this doesn´t work.

Could you help me?

[Parthiban Sundaram]

Hi Alvaro, 

Thanks for contacting Syncfusion support.

We have prepared a sample based on your requirement using LabelCreated event for NumericalAxis. Please find the sample from following location.

Sample :  https://www.syncfusion.com/downloads/support/forum/125068/ze/SimpleSample743658083 

Thanks,
Parthiban S. 

[Nassos Reyzidis]

Hello there,

sorry this is an old post but,

i am facing the same issue and i don't want to add an event. Is there a way to do it declarative in the XAML?

[Suyamburaja Jayakumar]

Hi Nassos Reyzidis, 

 

We have analyzed your requirement and you can achieve this requirement by using the below code. 

 

XAML: 

<chart:SfChart.SecondaryAxis> 

      <chart:NumericalAxis> 

         <chart:NumericalAxis.LabelStyle> 

             <chart:ChartAxisLabelStyle x:Name="axis" LabelFormat="{OnPlatform UWP='#,0,K'}"  /> 

         </chart:NumericalAxis.LabelStyle> 

      </chart:NumericalAxis> 

    </chart:SfChart.SecondaryAxis> 

 

And we will update complete details about android and iOS platform on or before July 2, 2020. 

 

Regards, 

Suyamburaja J. 

[Suyamburaja Jayakumar]

Hi Nassos Reyzidis,   

 

Sorry for the delay. 

   

We need some more time to validate this, since we have some technical block. Hence, we will update the complete details on or before July 6,2020. 

 

Regards, 

Suyamburaja J 

[Devakumar Dhanapoosanam]

Hi Nassos Reyzidis, 

 

Sorry for the delay. 

 

Currently in android and iOS the ChartAxisLabelStyle LabelFormat thousands format cannot be applied in the XAML. As we said earlier, we can achieve by using the NumericalAxis LabelCreated event or by using the NumericalAxis extended class and by overriding the OnCreateLabels method and modify the axis VisibleLabels.  

 

Solution 1: Using axis LabelCreated event. 

 

XAML: 

<chart:SfChart.SecondaryAxis> 

       <chart:NumericalAxis LabelCreated="SecondaryAxis_LabelCreated"> 

       </chart:NumericalAxis> 

</chart:SfChart.SecondaryAxis> 

 

C#: 

private void SecondaryAxis_LabelCreated(object sender, ChartAxisLabelEventArgs e) 

{ 

            double position = e.Position; 

 

            if (!double.IsNaN(position)) 

            { 

                if (position < 1000000) 

                { 

                    //Thousands format 

                    e.LabelContent = position.ToString("#,K"); 

                } 

                else if (e.Position < 1000000000) 

                { 

                    //Millions format 

                    e.LabelContent = position.ToString("#,,M"); 

                } 

                else 

                { 

                    //Millions format 

                    e.LabelContent = position.ToString("#,,,.00B"); 

                } 

            } 

} 

 

Note: 

·       Format numbers in billions: “#,,,B” 

·       Format numbers in millions: "#,,M" 

·       Format numbers in thousand: "#,K” 

 

Solution 2: Using the OnCreateLabels override method 

 

XAML: 

<chart:SfChart.SecondaryAxis> 

      <local:NumericalAxisExt/> 

</chart:SfChart.SecondaryAxis> 

 

C#: 

public class NumericalAxisExt : NumericalAxis 

{ 

        protected override void OnCreateLabels() 

        { 

            base.OnCreateLabels(); 

 

            foreach (var item in VisibleLabels) 

            { 

                item.LabelContent = item.Position.ToString("#,K"); 

            } 

        } 

} 

 

Please refer the below help document for more details, 

 

UG: https://help.syncfusion.com/xamarin/charts/axis#event 

UG: https://help.syncfusion.com/xamarin/charts/how-to/adding-custom-labels-to-sfchart-axis 

 

Please let us know if you need any further assistance on this. 

 

Regards, 

Devakumar D