Pre loader

How to implement custom zoom/pan in (X/Y)AxisDragModifier and ZoomPanModifier

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


I am trying to implement the following functionality requested by our users:

– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave

– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave

Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.

My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).

I have uploaded the code at

Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.

I would appreciate any help I can get and thanks a bunch in advance.

Best Regards,
Sachin Patel.

  • You must to post comments

I have taken a stab at implementing the zoom/pan functionality in TimeSeriesMouseWheelZoomModifier class located in src/customModifiers.ts.

For reference, the code is located on

It works the way I expected it to work — which is as follows:

– Mouse Wheel in the main chart area
– CTRL + Mouse Wheel on any of the axis
– Left click and drag on any of the axis

– Left click and drag in the main chart area
– Mouse Wheel on any of the axis

I would appreciate if you would take a peek at my implementation and suggest improvements if any.

Best Regards,
Sachin Patel.

  • Andrew Burnett-Thompson
    I think David on our team was working on a demo for something similar last week, will ask him!
  • You must to post comments

Hello Sachin, I checked your example and it looks good to me.
Also probably you may find this example useful.

  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.