How to synchronize axes across multiple .NET MAUI Charts (SfCartesianChart)?

4 mins read

The .NET MAUI Cartesian Chart can allow synchronization of the axis, zooming, and panning on multiple charts.

If you need to create multiple charts to get the best visual representation of your data, it could be a smart idea to bind them together, making it easy to effectively compare the data.

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:

This Cartesian chart shows the synchronization of axes across multiple charts.

Download the complete sample on GitHub.

Refer also to:

Conclusion

I hope you enjoyed learning about how to synchronize the axes on multiple charts? (SfCartesianChart).

You can refer to our .NET MAUI Cartesian Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our .NET MAUI Cartesian Chart documentation to understand how to present and manipulate data.

For current customers, you can check out our .NET MAUI components 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 Cartesian Chart and other .NET MAUI components.

If you have any queries or require clarifications, please let us know in the comment section below. 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

Comments (0)

How to synchronize axes across multiple .NET MAUI Charts (SfCartesianChart)?

Access denied