when I scroll the chart, the axis value is a decimal point.

Question

I'm using line charts with a numeric axis.

In it, when I scroll the chart, the axis value is a decimal point.

I want to keep the axis values fixed at integers when scrolling.

Please tell me how to solve these problems.

Sriram Kiran Senthilkumar · Answer

Hi Taichi, 
  
Greetings from Syncfusion. We have analyzed your scenario with the provided information at our end and to keep the axis value as integers itself on panning in  the chart, there are two ways available, one is by flooring the axis label value to integer before rendering in the chart with the help of the onAxisLabelRender event available in the chart and another one is by setting the decimalPlaces property of the NumericAxis to “0”. Please refer the code snippet below for further reference. 
1. Using onAxisLabelRender event: 





SfCartesianChart( 
                  onAxisLabelRender: (args) { 
                    // checked the name of the axis/ 
                    if (args.axisName == 'primaryXAxis') { 
                      // Floored the axis label value and set to its text argument to render the axis labels in  
                      // integers in the chart. 
                      args.text = args.value.floor().toString(); 
                    } 
                  }, 
                  primaryXAxis: NumericAxis( 
                      // Assigned name for x-axis to use it in the callback event 
                      name: 'primaryXAxis', 
                      decimalPlaces: 0, 
                  ) 
                  // Your configuration 
 
)  
 
2. By setting decimalPlaces property value to “0”. 





SfCartesianChart( 
                   primaryXAxis: NumericAxis( 
                      decimalPlaces: 0, 
                   ) 
                   // your configuration 
),  
 
Also, to ensure from our side, we have created a simple sample and attached below in which we have used both ways to render the axis labels only in integers when the chart is panned.  
Sample: https://www.syncfusion.com/downloads/support/forum/159888/ze/axis_label_integers403567852 
  
Please check with the above sample and revert us if you still have further concerns. 
 
For further reference on the decimalPlaces property and onAxisLabelRender event, please check the user guide below. 
decimalPlaces - https://help.syncfusion.com/flutter/cartesian-charts/axis-types#decimal-places 
onAxisLabelRender- https://help.syncfusion.com/flutter/cartesian-charts/callbacks#onaxislabelrender 
  
Regards, 
Sriram Kiran

Taichi Sasaki · Answer

Thanks for the answer!When I tried the two methods, the movement I had imagined was almost a reality.But there is one thing left to realize in order to get closer to the ideal.When I scroll the graph, I want the x-axis to move at the same time.Currently, when I stop scrolling, the values on the x-axis and the y-axis do not match exactly.

Sriram Kiran Senthilkumar · Answer

Hi Taichi, 
  
We have analyzed your query at our end, and we are sorry that we are not exactly sure on what you are trying to achieve regarding this query “When I scroll the graph, I want the x-axis to move at the same time”. So, we kindly request you to revert us with more information on your requirement is detail along with some example screen recording which depicts your exact requirement so that it will be helpful in further analysis in order to provide the solutions sooner. 
  
Regards, 
Sriram Kiran