How To Customize The .NET MAUI Cartesian Chart Axis

The .NET MAUI Chart control offers built-in support for customizing the axis range in a Cartesian chart. This range customization can be applied to NumericalAxes, DateTimeAxes, and LogarithmicAxes. You can achieve this support by setting the Minimum, Maximum, and Interval values on both the X and Y axes.

Range customization on Numerical axis

The following code example illustrates how to customize the range on a numerical axis:

XAML

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

  <chart:SfCartesianChart.YAxes>
      <chart:NumericalAxis Interval="20" Minimum="20" Maximum="200" />
  </chart:SfCartesianChart.YAxes>

C#

SfCartesianChart chart = new SfCartesianChart();

NumericalAxis xAxis = new NumericalAxis
{
    Interval = 1
};

chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis
{
Interval = 20,
Minimum = 20,
Maximum = 200
};

chart.YAxes.Add(yAxis);

Output for the range customization on Numerical axis

Range customization on DateTime axis

You can customize the range on a DateTime axis in the .NET MAUI Chart control by setting properties such as Minimum, Maximum, Interval, and IntervalType. The code example below illustrates how to achieve this:

XAML

<chart:SfCartesianChart.XAxes>
    <chart:DateTimeAxis Minimum="2023/06/01" Maximum="2023/06/07" Interval="1" IntervalType="Days" />
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
    <chart:NumericalAxis  />
</chart:SfCartesianChart.YAxes>

C#

SfCartesianChart chart = new SfCartesianChart();

DateTimeAxis xAxis = new DateTimeAxis
{
    Minimum="2023/06/01",
    Maximum="2023/06/07",
    Interval="1",
    IntervalType="Days"
};

chart.XAxes.Add(xAxis);

NumericalAxis yAxis = new NumericalAxis{};

chart.YAxes.Add(yAxis);

Output for the range customization on DateTime axis

Range customization on Logarithmic axis

You can customize the range on a Logarithmic axis in the .NET MAUI Chart control by setting properties such as Minimum, Maximum, Interval, and LogarithmicBase. The code example below illustrates how to achieve this:

XAML

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

<chart:SfCartesianChart.YAxes>
    <chart:LogarithmicAxis  Minimum="5" Maximum="125"  LogarithmicBase="5"/>
</chart:SfCartesianChart.YAxes>

C#

SfCartesianChart chart = new SfCartesianChart();

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

LogarithmicAxis yAxis = new LogarithmicAxis
{
    Minimum = 5,
    Maximum = 125,
    LogarithmicBase = 5
};

chart.SecondaryAxis = yAxis;

Output for the range customization on Logarithmic axis

Conclusion

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

You can refer to our .NET MAUI Chart’s feature tour page to know 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, you can check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

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