Pre loader

Different zooming on axes?


Howdy! I’m Ross, and I’ve been trying out SciChart as a replacement for Dynamic Data Display in a program I’m working on. So far, SciChart has better documentation, support, and features, which is great. Once I’m at the level where I was with the previous tool, this will likely be the one I purchase. But there was a good behavior I liked in D3 that I’m struggling to implement in SciChart.

I want the scroll wheel behavior to only zoom on a single axis when the mouse is over that axis. So if I move my mouse over the x-axis and scroll, I want it to only change that axis’ space.

So, for example, “Drawing a line graph” here:

I think the key is my inability to find the region that the axes occupy. I know I can trigger on entering or leaving the region to change behavior from there. Is there an easy way to find these values?

If this is in some example I haven’t seen or has been answered before, I’d be appreciative of a link, as well! Thanks!

  • You must to post comments

Got it working! I ended up using some different code to get the job done, which I’ll share here:

        // Custom mouse wheel usage 
        public override void OnModifierMouseWheel(ModifierMouseArgs e)
            // Get region of axis
            Rect XAxisBounds = XAxis.GetBoundsRelativeTo(RootGrid);
            Rect YAxisBounds = YAxis.GetBoundsRelativeTo(RootGrid);

            // Only zoom in that axis if mouse over axis
            if      (XAxisBounds.Contains(e.MousePoint))
                // If zooming in
                if      (e.Delta > 0)
                    XAxis.ZoomBy(-0.1, -0.1);
                // If zooming out
                else if (e.Delta < 0)
                    XAxis.ZoomBy( 0.1,  0.1);

                // Now don't do anything else
                e.Handled = true;
            else if (YAxisBounds.Contains(e.MousePoint))
                if      (e.Delta > 0)
                    YAxis.ZoomBy(-0.1, -0.1);
                else if (e.Delta < 0)
                    YAxis.ZoomBy( 0.1,  0.1);

                e.Handled = true;

            // Otherwise, operate normally

Your initial points and several key methods helped out a lot! I also simplified some parts I didn’t need. Thanks!

  • You must to post comments

Hi Ross,

Nice to meet you! Glad you are finding SciChart good so far 🙂

Did you know we have a selection of ChartModifiers which add interactivity to the chart? Also we have an API which you can use to create your own modifiers.

Take a look at the YAxisDragModifier / XAxisDragModifier. There is an online demo which shows how to use these here. Click on the ‘Pan’ button and drag the axes.

Ok so how to extend these to add mouse-wheel behaviour? Well you would need to create a class which derives from ChartModifierBase. We have methods to override, including OnModifierMouseWheel. To detect if the mouse is over an axis, we use this code:

var axisBounds = axis.GetBoundsRelativeTo(RootGrid); // RootGrid is SciChartSurface.MainGrid, or ChartModifierBase.RootGrid

// Exit if the mouse down was outside the bounds                        
if (!axisBounds.Contains(e.MousePoint))

Next, to pan (scroll) a specific axis, we use this API call

/// <summary>
        /// Peforms a pan on the assocaited <see cref="AxisBase" />. The pan is considered to be a drag from <paramref name="currentPoint" /> to <paramref name="lastPoint" />
        /// </summary>
        /// <param name="currentPoint">The current mouse point</param>
        /// <param name="lastPoint">The last mouse point</param>
        protected void PerformPan(Point currentPoint, Point lastPoint)
            string axisIdToFind = "DefaultAxisId"; // Adjust as necessary
            var axis = GetYAxis(axisIdToFind); 

            var xDelta = currentPoint.X - lastPoint.X;
            var yDelta = lastPoint.Y - currentPoint.Y;

            axis.Scroll(axis.IsHorizontalAxis ? -xDelta : yDelta, ClipMode.None);

Now you will have to fake currentPoint / lastPoint. These are pixels assuming the operation is a mouse-drag. In fact you could simplify this a lot by passing in +/- 10 to the axis.Scroll method.

I hope this helps! If you need further help creating a custom modifier just post back 🙂

Best regards,

  • boss1000
    Thanks a lot for the reply. I'll hopefully get to trying this out soon. I'm familiar with ChartModifiers since what I'm displaying are actually almost exclusively annotations. This tutorial was crucial: From looking at this for a bit, I assume what we're doing is co-opting the panning function to zoom.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies