Articles in this section

How to change the position of the axis in .NET MAUI Cartesian Charts?

The .NET MAUI Cartesian Chart has support for positioning the chart axis at its default position, opposite position, and anywhere in the chart area. You can achieve this by utilizing the CrossesAt property. This property specifies where the horizontal axis intersects or crosses the vertical axis, and vice versa.
Custom Position:
To position the chart axis anywhere in the chart area, set the specific value where the axis crosses the opposite axis to the CrossesAt property.
The following code snippet illustrates how to change the position of the axis to a custom position:

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:NumericalAxis CrossesAt="130" />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis CrossesAt="3" />
    </chart:SfCartesianChart.YAxes>
    
    <chart:LineSeries ItemsSource="{Binding Data}" 
                      XBindingPath="XValues"
                      YBindingPath="YValues"/>
    
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.CrossesAt = 130;
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.CrossesAt = 3;
chart.YAxes.Add(secondaryAxis);

LineSeries series = new LineSeries();
series.ItemsSource = (new ViewModel()).Data;
series.XBindingPath = "XValues";
series.YBindingPath = "YValues";
chart.Series.Add(series);

Output

Custom_axis_position.png

Opposed position:
To position the chart axis in the opposite position, set the value as double.MaxValue to the CrossesAt property.
The following code snippet illustrates how to change the position of the axis to the opposite position

[XAML]

<chart:SfCartesianChart>
. . .
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis CrossesAt="{Static x:Double.MaxValue}"/>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis CrossesAt="{Static x:Double.MaxValue}"/>
    </chart:SfCartesianChart.YAxes>
    
    <chart:LineSeries ItemsSource="{Binding Data}" 
                      XBindingPath="Name"
                      YBindingPath="Height"/>
    
</chart:SfCartesianChart>

[C#]

SfCartesianChart chart = new SfCartesianChart();
. . .
CategoryAxis primaryAxis = new CategoryAxis();
primaryAxis.CrossesAt = double.MaxValue;
chart.XAxes.Add(primaryAxis);
NumericalAxis secondaryAxis = new NumericalAxis();
secondaryAxis.CrossesAt = double.MaxValue;
chart.YAxes.Add(secondaryAxis);

LineSeries series = new LineSeries();
series.ItemsSource = (new ViewModel()).Data;
series.XBindingPath = "Name";
series.YBindingPath = "Height";
chart.Series.Add(series);

Output

Change_axis_position.png

Conclusion
I hope you enjoyed learning how to change the position of the axis in the .NET MAUI Cartesian Chart.

Refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our 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 comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Access denied
Access denied