RadChart Zoom and Container Scrollviewer

2 posts, 0 answers
  1. Ionut
    Ionut avatar
    1 posts
    Member since:
    Mar 2016

    Posted 07 Apr 2016 Link to this post

    Hi, I have a problem with the zooming and scrolling in a simple chart application. My screen has multiple charts (line charts in this particular example), and a Scrollviewer that contains them all. The problem is that when I want to zoom in in a chart it scrolls up and when I zoom out it scrolls down in the same time. I have tried to resolve this problem by checking when the mouse is inside the chart zone and disable the scrollviewer but it didn't work because that disabled my mouse wheel for good..

    This is the code I used to disable the mouse wheel for the scrollviewer and pass it to the chart control:

    private UIElement chart;
    private void MouseLeaveChart(LineChartView lineChartView)
        // this is triggered when the mouse leaves the chart area
        chart = null;
    private void MouseEnterChart(RadCartesianChart radCartesianChart)
        // this is triggered when the mouse enters the chart area
        chart = radCartesianChart;
    private void ScrollViewer_OnPreviewMouseWheel(object sender, MouseWheelEventArgs e)
        if (chart != null)
            e.Handled = true;
            var e2 = new MouseWheelEventArgs(e.MouseDevice, e.Timestamp, e.Delta);
            e2.RoutedEvent = UIElement.MouseWheelEvent;

    Any kind of help is highly appreciated, thank you in advance! 


  2. Peshito
    Peshito avatar
    522 posts

    Posted 11 Apr 2016 Link to this post


    In order to achieve your expected result please attach to chart's MouseWheel event like shown below:
    Copy Code
    void chart_MouseWheel(object sender, MouseWheelEventArgs e)
                var pos = e.GetPosition(this.chart);
                ChartPanAndZoomBehavior behav = (ChartPanAndZoomBehavior)this.chart.Behaviors.FirstOrDefault(b => b is ChartPanAndZoomBehavior);
                bool isZoom = behav != null;
                if (!isZoom)
                e.Handled = true;

    This will make sure that the chart will zoom only when the mouse is over it. Otherwise, scrolling outside of the chart area will scroll the ScrollViewer.

    Attached is a sample project demonstrating the above approach.

    Hope it helps.

    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top