1. Home
  2. Forum
  3. Xamarin.Forms
  4. How to specify the interval of x-axis with CategoryAxis

How to specify the interval of x-axis with CategoryAxis

Hi all,

my data content is as below
//I provide the code in the zip file
x_axis = { 4, 4.25, 4.5, 4.75, 5, 5.25, 5.5, 5.75, 6, ..., 19, 19.25, 19.5, 19.75, 20}, increased by 0.25, x_axis.count = 65
y_axis = {3600, 3600, 3600, 3600, ..., 3600}, all the value is 3600, y_axis.count = 65

I do not know why the Chart(StackingAreaSeries) looks so strange when the x-axis type set as NumericalAxis. [Screenshot_1.png]

When the x-axis type changed to CategoryAxis, the graph part of this chart is what I want. [Screenshot_2.png]

I found that if we do not set the interval manually, then the API will change the interval according to the width of the screen size. [Screenshot_3.png and Screenshot_4.png are two different width size of the device]
So I want to specify the x-axis to make it show as {4,6,8,10,12,14,16,18,20} [Screenshot_2.png]

*Questions*
1. Why the graph looks strange with the x-axis type NumericalAxis, and it looks normal with CategoryAxis?
2. The NumericalAxis cannot set the interval, so what should I do with my data?

*** Please download the zip file


Attachment: Question20201215_13067efe.zip

1 Reply 1 reply marked as answer
SJ Suyamburaja Jayakumar Syncfusion Team December 16, 2020 01:28 PM UTC

 
Greetings from Syncfusion. 
 
Query1: Why the graph looks strange with the x-axis type NumericalAxis, and it looks normal with CategoryAxis? 
 
We have validated the provided code snippet and figured that the data points were not created in the order of 4, 4.25,4.5 as expect. Please modify the datapoints like below. 
 
for (int i = 0; i < 65; i++) 
 { 
      tmp = (i / 4) + 4; 
      tmp = 4 + (0.25 * i); 
 
      var data = new Model() { XValue = tmp, YValue = 3600 }; 
      Data.Add(data); 
 } 
 
Screenshot: 
 
 
Query2: The NumericalAxis cannot set the interval, so what should I do with my data? 
 
By default chart calculate nice interval based on the datapoints, it will be override by setting Interval to the NumericalAxis by below code snippet. 
 
XAML: 
NumericalAxis primaryAxis = new NumericalAxis(); 
primaryAxis.Title.Text = ""; 
 primaryAxis.Interval = 2; 
 AreaChart.PrimaryAxis = primaryAxis; 
 
Please check the modified sample and let us know your concern. 
 
 
Related guidelines: 
 
Please let us know if you need any further assistance. 
 
Regards, 
Suyamburaja J. 


Marked as answer
Loader.
Up arrow icon