Articles in this section
Category / Section

How to add multiple axes in .NET MAUI Chart (SfCartesianChart)?

5 mins read

This article explains how to add multiple Y-axes in the .NET MAUI Cartesian Charts.

Consider the use case of plotting the graph for two different scenarios with varying unit rates on the same field as shown in the following image. It has been achieved by using the XAxes and YAxes of the SfCartesianChart.

Multiple axes example chart in the .NET MAUI (SfCartesian chart)

Step 1: Populate the chart with multiple axes. Add multiple axes to the SfCartesianChart.YAxes property. Then, assign the axis Name property for each axis as follows:

[XAML]

     <chart:SfCartesianChart.XAxes>
           <chart:DateTimeAxis Name="primaryX"/>
     </chart:SfCartesianChart.XAxes>
     
     <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis Name="primaryY"/>
           <chart:NumericalAxis Name="secondaryY"/>
     </chart:SfCartesianChart.YAxes>

[C#]

DateTimeAxis xAxis = new DateTimeAxis()
{
     Name = "primaryX",
};
chart.XAxes.Add(xAxis);
 
NumericalAxis yAxis = new NumericalAxis()
{
     Name = "primaryY",
};
chart.YAxes.Add(yAxis);
 
NumericalAxis yAxis2 = new NumericalAxis()
{
     Name = "secondaryY",
};
chart.YAxes.Add(yAxis2);

 

Step 2: Assign the respective axis to the series. Assign the respective axis name to the series using the cartesian series YAxisName property as follows:

[XAML]

    <chart:SfCartesianChart.Series>
           <chart:ColumnSeries  YAxisName="primaryY"/>
           <chart:LineSeries YAxisName="secondaryY"/>
    </chart:SfCartesianChart.Series>

[C#]

ColumnSeries series1 = new ColumnSeries();
Series1.YAxisName = "primaryY";
chart.Series.Add(series1);
 
LineSeries series2 = new LineSeries();
series2.YAxisName = "secondaryY";
chart.Series.Add(series2);

 

Step 3: Position the chart axis. An axis can be positioned anywhere in the chart area by using the CrossesAt property. Set the CrossesAt property as the MaxValue to place the Y axis at the opposite of its actual position.

[XAML]

     <chart:SfCartesianChart.YAxes>
           <chart:NumericalAxis Name="primaryY" />
           <chart:NumericalAxis CrossesAt="{Static x:Double.MaxValue}" Name="secondaryY"/>
     </chart:SfCartesianChart.YAxes>

[C#]

NumericalAxis yAxis = new NumericalAxis()
{
     Name = "primaryY",
};
chart.YAxes.Add(yAxis);
 
NumericalAxis yAxis2 = new NumericalAxis()
{
     Name = "secondaryY",
     CrossesAt = double.MaxValue
};
chart.YAxes.Add(yAxis2);

 

Note:

By default, the series are plotted based on the 0th index axis of the XAxes and YAxes collections.

Explore the runnable demo from this GitHub location.

See also

How to add multiple axes in the .NET MAUI charts.

How to create a .NET MAUI Chart using the JSON Data (SfCartesianChart)

How to plot date-time values in vertical axes in .NET MAUI Chart (SfCartesianChart)?

How to display more data in the tooltip in MAUI Chart (SfCartesianChart)?

 

Conclusion

I hope you enjoyed learning about how to add multiple axes in .NET MAUI Chart (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 forumsDirect-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)
Please  to leave a comment
Access denied
Access denied