How to make a graph with multiple axes with Xamarin.Forms Charts
This article explains how to add the multiple Y-axis in Xamarin.Forms Charts.
Consider, the use case to plot the graph for two products with different unit sales rate on the specific month as shown in the following image. It has been achieved by using the X-Axis and Y-Axis of the series.
By default, Cartesian series made using the SfChart's PrimaryAxis and SecondaryAxis.
How to add the multiple Y-axis in Xamarin.Forms Chart using XAML
Step 1: Declare the default PrimaryAxis and SecondaryAxis of SfChart with its customization.
… <chart:SfChart.PrimaryAxis> <chart:DateTimeAxis Interval="1" IntervalType="Months" /> </chart:SfChart.PrimaryAxis> <chart:SfChart.SecondaryAxis> <chart:NumericalAxis Interval="5" /> </chart:SfChart.SecondaryAxis> …
Step 2: Declaration to add Y-axis for the required series.
…
<chart:SfChart.Series>
<chart:SplineSeries ItemsSource="{Binding Data}" XBindingPath="XValue" YBindingPath="YValue2" Color="#d938d6" StrokeWidth="3" Label="Bullet">
<chart:SplineSeries.YAxis>
<chart:NumericalAxis OpposedPosition="true" Minimum="15" Maximum="23" Interval="2" EdgeLabelsDrawingMode="Fit">
</chart:NumericalAxis>
</chart:SplineSeries.YAxis>
</chart:SplineSeries>
</chart:SfChart.Series>
…
How to add the multiple Y-axis in Xamarin.Forms Chart using C#
The following C# code example shows how to add Y-axis (or intend of X-axis) property in chart series.
…
SplineSeries splineSeries = new SplineSeries();
splineSeries.ItemsSource = viewModel.Data;
splineSeries.XBindingPath = "XValue";
splineSeries.YBindingPath = "YValue";
splineSeries.YAxis = new NumericalAxis()
{
Minimum = 15,
Maximum = 23,
Interval = 2,
IsVertical = true,
OpposedPosition = true
};
…
See also
Adding duplicate axis in SfChart
How to customize the axis label format based on the culture in Xamarin.Forms Chart (SfChart)
How to customize the axis labels
