SyncfusionExamples / How-to-zoom-in-and-out-of-a-WPF-Chart-in-the-scroll-viewer

This article explains how to perform chart zooming instead of vertical scrolling within a scroll viewer

How to zoom in and out of a WPF Chart in the scroll viewer

The article describes how to perform chart zooming within the scroll viewer using the mouse wheel. To enable zooming through the mouse wheel, set the EnableMouseWheelZooming property of ChartZoomPanBehavior to true.

The default behavior is that when the chart is placed inside the scroll viewer, it scrolls up or down instead of zooming in or out. By limiting the scrolling action to the scroll viewer, we can zoom in or out of the chart without any unintended interactions. The scrolling action inside the scroll viewer has been restricted according to the following code samples:

[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>