How to zoom in and out of a WPF Chart in the scroll viewer?
Description
This article describes how to perform zooming in a WPF SfChart using the mouse wheel, even when the chart is placed inside a scroll viewer. By default, when a chart is embedded in a scroll viewer, scrolling the mouse wheel will scroll the view instead of zooming the chart as shown in the following output. This behavior can be modified to support zooming.
Solution
To enable zooming using the mouse wheel, set the EnableMouseWheelZooming property of ChartZoomPanBehavior to true.
However, when a chart is placed inside a scroll viewer, the default behavior prioritizes scrolling over zooming. To allow zooming behavior inside a scroll viewer, you can subclass the ScrollViewer and override its OnMouseWheel method to bypass scrolling when the mouse wheel event originates from an SfChart, as shown in the following code example.
[C#]
public class ScrollViewerExt: ScrollViewer
{
protected override void OnMouseWheel(MouseWheelEventArgs e)
{
// To restrict scroll action on chart
if (e.Source is SfChart)
return;
base.OnMouseWheel(e);
}
}[XAML]
<local:ScrollViewerExt VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Hidden" > <StackPanel> <chart:SfChart x:Name="chart"> . . . <chart:SfChart.Behaviors > <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" /> </chart:SfChart.Behaviors> . . . </chart:SfChart> <chart:SfChart x:Name="chart1"> . . . <chart:SfChart.Behaviors > <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" /> </chart:SfChart.Behaviors> . . . </chart:SfChart> <chart:SfChart x:Name="chart2"> . . . <chart:SfChart.Behaviors > <chart:ChartZoomPanBehavior EnableMouseWheelZooming="True" /> </chart:SfChart.Behaviors> . . . </chart:SfChart> </StackPanel> </local:ScrollViewerExt>
You can download the complete GitHub sample here.
Related articles:
How to improve performance while zooming by using scrollbar in WPF Chart (SfChart)?
How to display the visible range of labels while zooming in WPF Chart (SfChart)?
How to reset zooming in WPF Chart (SfChart)?
Conclusion
I hope you enjoyed learning about how to zoom in and out of a WPF Chart in the scroll viewer.
You can refer to our WPF Chart’s feature tour page to know about its other groundbreaking feature representations. You can also explore our WPF Chart documentation to understand how to present and manipulate data.
For current customers, you can check out our WPF 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 WPF Chart and other WPF 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!
