How to customize axis range in .NET MAUI Chart (SfCartesianChart)?

The .NET MAUI Chart control offers built-in support for customizing the axis range in a Cartesian chart. The range customization can be applied to the NumericalAxis, CategoryAxis, DateTimeAxis, and LogarithmicAxis. Provide this support by configuring the Minimum, Maximum, and Interval values for both axes.

Range customization on the Numerical axis
Scenario: Visualize daily temperature shifts from 10°C to 30°C in a weather monitoring app.
To customize the Numerical axis set properties like Minimum and Maximum to define the axis range, and use Interval to control the spacing of values on both the X and Y axes.
The following code example illustrates how to customize the range on a numerical axis:

XAML

<chart:SfCartesianChart>

 <chart:SfCartesianChart.XAxes>
  <chart:NumericalAxis Interval="3"/>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis Interval="5" Minimum="5" Maximum="50"/>   
 </chart:SfCartesianChart.YAxes>
 ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();
     
NumericalAxis xAxis = new NumericalAxis
{
   Interval = 3
};
      
chart.XAxes.Add(xAxis);
    
NumericalAxis yAxis = new NumericalAxis
{
Interval = 5,
Minimum = 5,
Maximum = 50
};
    
chart.YAxes.Add(yAxis);
...
this.Content = chart;

Output for the range customization on the Numerical axis

Range customization on the Category axis
Scenario: Visualize hourly weather changes: Sunny, Rainy, Clear in one day.
To customize the interval on a CategoryAxis by setting the Interval property to control the spacing of labels.
By default, the Category axis labels are displayed with a fixed interval of 1. It can be customized by using the Interval property of axis.
The following code example illustrates how to achieve this:

XAML

<chart:SfCartesianChart>

 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis Interval="2"/>
 </chart:SfCartesianChart.XAxes>
 
 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis Interval="5" Minimum="0" Maximum="30"/>  
 </chart:SfCartesianChart.YAxes>
 ...
</chart:SfCartesianChart>
 

C#

SfCartesianChart chart = new SfCartesianChart(); 

CategoryAxis xAxis = new CategoryAxis
{
   Interval = 2
};
      
chart.XAxes.Add(xAxis);
    
NumericalAxis yAxis = new NumericalAxis
{
   Interval = 5,
   Minimum = 0,
   Maximum = 30
};
    
chart.YAxes.Add(yAxis);
...
this.Content = chart;

Output for the range customization on the Category axis

Range customization on the DateTime axis
Scenario:Visualize weekly temperature changes from 14°C to 25°C, highlighting trends and fluctuations.
To customize DateTime axis set properties like Minimum and Maximum to define the axis range, use Interval to control the spacing, and IntervalType to control the type of interval.
The following code example illustrates how to achieve this:
XAML

<chart:SfCartesianChart>

 <chart:SfCartesianChart.XAxes>
  <chart:DateTimeAxis Minimum="2024/11/01" Maximum="2024/11/07" Interval="2"   
                      IntervalType="Days"/>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:NumericalAxis Interval="5" Minimum="0" Maximum="30"/>
 </chart:SfCartesianChart.YAxes>  
 ...
</chart:SfCartesianChart> 

C#

SfCartesianChart chart = new SfCartesianChart();
     
DateTimeAxis xAxis = new DateTimeAxis
{
   Minimum = new DateTime(2024,11,01),
   Maximum = new DateTime(2024,11,07),
   Interval = 2,
   IntervalType = DateTimeIntervalType.Days
};
      
chart.XAxes.Add(xAxis);
    
NumericalAxis yAxis = new NumericalAxis
{
   Interval = 5,
   Minimum = 0,
   Maximum = 30
};

chart.YAxes.Add(yAxis);
...
this.Content = chart;

Output for the range customization on the DateTime axis

Range customization on the Logarithmic axis
Scenario: Visualize vehicle speed progression, reaching 0 to 160 km/h in specified seconds.
To customize the LogarithmicAxis set properties like Minimum and Maximum to define the axis range, use Interval to control the label spacing, and LogarithmicBase for scaling. The following code example illustrates how to achieve this:

XAML

<chart:SfCartesianChart>

 <chart:SfCartesianChart.XAxes>
  <chart:CategoryAxis/>
 </chart:SfCartesianChart.XAxes>

 <chart:SfCartesianChart.YAxes>
  <chart:LogarithmicAxis Minimum="1" Maximum="200" LogarithmicBase="2"/>
 </chart:SfCartesianChart.YAxes>  
 ...
</chart:SfCartesianChart>

C#

SfCartesianChart chart = new SfCartesianChart();

CategoryAxis xAxis = new CategoryAxis();
chart.PrimaryAxis = xAxis;

LogarithmicAxis yAxis = new LogarithmicAxis
{
   Minimum = 1,
   Maximum = 200,
   LogarithmicBase = 2
};

chart.SecondaryAxis = yAxis;
...
this.Content = chart;

Output for the range customization on the Logarithmic axis

Conclusion
I hope you enjoyed learning how to customize the axis range for the .NET MAUI Chart (SfCartesianChart).

Refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!