How to Synchronize Panning in WPF Charts?

Synchronizing panning across multiple charts in a WPF application can enhance the user experience by allowing users to view related data simultaneously. This article outlines the steps to achieve synchronized panning in Syncfusion WPF SfCharts.

Steps to achieve Synchronized Panning in Multiple Charts

1. Set Up Multiple Charts

Let’s configure the Syncfusion WPF Chart control using this getting started documentation. Refer to the following code example to create multiple charts in your application.

<Grid>
. . . .
    <syncfusion:SfChart x:Name="StepLineChart" Grid.Row="0">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:NumericalAxis />
            </syncfusion:SfChart.PrimaryAxis>
            <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis />
            </syncfusion:SfChart.SecondaryAxis>
        <syncfusion:StepLineSeries ItemsSource="{Binding StepLineChartData}" 
                                   XBindingPath="X" 
                                   YBindingPath="Y"
                                   Interior="#9013FE" />
    </syncfusion:SfChart>

    <syncfusion:SfChart x:Name="AreaChart" Grid.Row="1">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:NumericalAxis />
            </syncfusion:SfChart.PrimaryAxis>
            <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis/>
            </syncfusion:SfChart.SecondaryAxis>
        <syncfusion:AreaSeries ItemsSource="{Binding AreaChartData}" 
                               XBindingPath="X" 
                               YBindingPath="Y" 
                               StrokeThickness="20"
                               Interior="#FFB6C1" />
    </syncfusion:SfChart>

    <syncfusion:SfChart x:Name="SplineChart" Grid.Row="2">
            <syncfusion:SfChart.PrimaryAxis>
                <syncfusion:NumericalAxis/>
            </syncfusion:SfChart.PrimaryAxis>
            <syncfusion:SfChart.SecondaryAxis>
                <syncfusion:NumericalAxis />
            </syncfusion:SfChart.SecondaryAxis>
        <syncfusion:SplineSeries ItemsSource="{Binding SplineChartData}" 
                                 XBindingPath="X" 
                                 YBindingPath="Y" 
                                 Interior="#8BC34A" />
    </syncfusion:SfChart>
. . . .
</Grid> 

2. Enable Zoom Pan behavior for each Chart

The panning feature enables moving the visible area of the chart when zoomed in. To activate panning, set the EnablePanning property to true.

<syncfusion:SfChart>
. . . 

   <syncfusion:SfChart.Behaviors>
       <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
   </syncfusion:SfChart.Behaviors>

. . .
</syncfusion:SfChart> 

3. Handle the Zooming and Panning changed events

This event tracks the changes in the visible area and update the viewports of other charts to match the new range.

[XAML]

<syncfusion:SfChart ZoomChanging="Chart_ZoomChanging" PanChanging="Chart_PanChanging">
. . . 

   <syncfusion:SfChart.Behaviors>
       <syncfusion:ChartZoomPanBehavior ZoomMode="X" EnablePanning="True"/>
   </syncfusion:SfChart.Behaviors>

. . .
</syncfusion:SfChart> 

[C#]

private void Chart_ZoomChanging(object sender, ZoomChangingEventArgs e)
{
   SfChart sourceChart = (SfChart)sender;
   foreach (var chart in new[] { StepLineChart, SplineChart, AreaChart })
   {
       if (chart != sourceChart)
       {
           chart.PrimaryAxis.ZoomFactor = e.CurrentFactor;
           chart.PrimaryAxis.ZoomPosition = e.CurrentPosition;
       }
   }
}

private void Chart_PanChanging(object sender, PanChangingEventArgs e)
{
   SfChart sourceChart = (SfChart)sender;
   foreach (var chart in new[] { StepLineChart, SplineChart, AreaChart })
   {
       if (chart != sourceChart)
       {
           chart.PrimaryAxis.ZoomPosition = e.NewZoomPosition;
           chart.PrimaryAxis.ZoomFactor = e.Axis.ZoomFactor;
       }
   }
}

The following demo video illustrates multiple Charts in WPF with synchronized panning, showing how the visible areas of the charts move together when panning is performed on any one chart, following the implemented synchronization steps.

For more details, please refer to the project on GitHub.

Conclusion

I hope you enjoyed learning how to Synchronize panning in WPF Multiple Chart.
You can refer to our WPF Chart Feature Tour page know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our WPF Chart Examples to understand how to create and manipulate data.

For current customers, you can check out our 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 other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!