I am trying to implement the following functionality requested by our users:
Zoom:
– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave
Pan/Scroll:
– 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 codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts
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.
- sachin patel asked 1 year ago
- You must login 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 codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts:2313-2392
It works the way I expected it to work — which is as follows:
Zoom:
– Mouse Wheel in the main chart area
– CTRL + Mouse Wheel on any of the axis
– Left click and drag on any of the axis
Pan:
– 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.
- sachin patel answered 1 year ago
-
I think David on our team was working on a demo for something similar last week, will ask him!
- You must login to post comments
Hello Sachin, I checked your example and it looks good to me.
Also probably you may find this example useful.
- Jim Risen answered 1 year ago
- You must login to post comments
Please login first to submit.