How to synchronize axes across multiple .NET MAUI Charts (SfCartesianChart)?
The .NET MAUI Cartesian Chart allows for the synchronization of axes, as well as zooming and panning across multiple charts. This feature is helpful for visually comparing data across different charts by binding them together.
Step 1: Determine the number of charts you need to create to effectively visualize your data.
Step 2: Initialize a grid with the desired number of rows and columns.
Step 3: Initialize a Cartesian chart in each grid cell with the help of this guideline.
[XAML]
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- chart 1 -->
<chart:SfCartesianChart Grid.Row="0">
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis />
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:FastLineSeries ItemsSource="{Binding Data1}"
XBindingPath="Name" YBindingPath="Value"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
<!--chart 2 -->
<chart:SfCartesianChart Grid.Row="1">
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:SplineAreaSeries ItemsSource="{Binding Data2}"
XBindingPath="Name" YBindingPath="Value"/>
</chart:SfCartesianChart.Series>
</chart:SfCartesianChart>
<!--chart 3 -->
<chart:SfCartesianChart Grid.Row="2">
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis/>
</chart:SfCartesianChart.XAxes>
<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis />
</chart:SfCartesianChart.YAxes>
<chart:SfCartesianChart.Series>
<chart:ColumnSeries ItemsSource="{Binding Data3}"
XBindingPath="Name" YBindingPath="Value"/>
</chart:SfCartesianChart.Series>
<chart:SfCartesianChart.ZoomPanBehavior>
<chart:ChartZoomPanBehavior ZoomMode="X"/>
</chart:SfCartesianChart.ZoomPanBehavior>
</chart:SfCartesianChart>
</Grid>Step 4: Assign a unique x: Name to each primary axis of the chart.
[XAML]
<Grid> . . . <!-- chart 1 --> <chart:SfCartesianChart Grid.Row="0"> <chart:SfCartesianChart.XAxes> <chart:NumericalAxis x:Name="XAxis1"/> </chart:SfCartesianChart.XAxes> . . . </chart:SfCartesianChart> <!--chart 2 --> <chart:SfCartesianChart Grid.Row="1"> <chart:SfCartesianChart.XAxes> <chart:NumericalAxis x:Name="XAxis2"/> </chart:SfCartesianChart.XAxes> . . . </chart:SfCartesianChart> <!--chart 3 --> <chart:SfCartesianChart Grid.Row="2"> <chart:SfCartesianChart.XAxes> <chart:NumericalAxis x:Name="XAxis3"/> </chart:SfCartesianChart.XAxes> . . . </chart:SfCartesianChart> </Grid>
Step 5: Bind the zoom factor and zoom position of all the XAxes together using the following:
[XAML]
<Grid>
. . .
<!-- chart 1 -->
<chart:SfCartesianChart Grid.Row="0">
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis x:Name="XAxis1"/>
</chart:SfCartesianChart.XAxes>
. . .
</chart:SfCartesianChart>
<!--chart 2 -->
<chart:SfCartesianChart Grid.Row="1">
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis x:Name="XAxis2"
ZoomPosition="{Binding Path=ZoomPosition,Source={x:Reference XAxis1},Mode=TwoWay}"
ZoomFactor="{Binding Path=ZoomFactor, Source={x:Reference XAxis1},Mode=TwoWay}"/>
</chart:SfCartesianChart.XAxes>
. . .
</chart:SfCartesianChart>
<!--chart 3 -->
<chart:SfCartesianChart Grid.Row="2">
<chart:SfCartesianChart.XAxes>
<chart:NumericalAxis x:Name="XAxis3"
ZoomPosition="{Binding Path=ZoomPosition,Source={x:Reference XAxis1},Mode=TwoWay}"
ZoomFactor="{Binding Path=ZoomFactor, Source={x:Reference XAxis1},Mode=TwoWay}" />
</chart:SfCartesianChart.XAxes>
. . .
</chart:SfCartesianChart>
</Grid>Output:
Download the complete sample on GitHub.
Conclusion
I hope you enjoyed learning how to synchronize the axes on multiple charts (SfCartesianChart).
You can refer to our .NET MAUI Cartesian Chart feature tour page to learn about its other groundbreaking feature representations. Explore our .NET MAUI Cartesian Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Cartesian Chart and other .NET MAUI components.
Please let us know in the comment 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!
