1. Home
  2. Forum
  3. Flutter
  4. Numeric Axis Custom Labels

Numeric Axis Custom Labels

Hi,

I'm working on a number of charts representing data for people in which the X-axis is a (numerical) 'number of days since birth' axis.

I would like to apply some 'smart formatting' to the labels of the X-axis:

  • For charts only spanning a number of days, I would just show the days (ok)
  • For charts spanning a longer period, I would like to format the days in weeks, months or even years.
    So if a chart with 5 labels spans for example 2000 days, instead of showing (0d, 500d, 1000d, 1500d, 2000d), I would like to show (0d, 1y4m, 1y9m, 3y1m, 4y1m)

    I have a method which can do the formatting (String makeReadable(int days)) for me, but I don't see a way to 'feed' this method to the chart. Is there a way to use the 'numberFormat' field for this? If so, how can I do it?

1 Reply
DD Dharanidharan Dharmasivam Syncfusion Team April 8, 2020 09:16 AM UTC

Hi Bart, 
 
Greetings from Syncfusion. We have analyzed your requirement and you can for the axis labels using the numberFormat property of the numeric axis. For more information on this, find the user guide below. 
 
Also, you can customize the axis labels using the onAxisLabelRender event. This event will be triggered for each axis label and using your makeReadable method you can customize based on your scenario. We have prepared a sample in which we have customized the y-axis with numberFormat property and for the x-axis, we have customized using the onAxisLabelRender event. 
 
 
SfCartesianChart( 
                  onAxisLabelRender: (AxisLabelRenderArgs args) { 
                    if (args.axisName == 'primaryXAxis') { 
                      args.text = 'Jan'; 
                    } 
                  }, 
                  primaryYAxis: NumericAxis( 
                      numberFormat: NumberFormat.decimalPercentPattern() 
                  ), 
                  // Other configurations 
                ) 
 
 
The sample for reference can be found below. 
 
Thanks, 
Dharani. 


Loader.
Up arrow icon