Articles in this section
Category / Section

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

2 mins read

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.

Default scroll viewer display in WPF Chart

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


Restriced scroll display in WPF Chart


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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied