When holding shift key, zoom behaviour only zooms inward on the SfCartesianChart

[Software Developer]

Hello,

I’m developing a feature where the default zoom behaviour only works in the x axis, but when the user holds the Shift key down, zooming can work in both the x and y axes. My code seems to work well. The problem is that when the user holds Shift, no matter the direction they scroll the mouse wheel, the graph will always be zoomed inwards. This means that when they are holding Shift and scroll the mouse wheel backwards to zoom out, the zoom is doing the opposite of what they want.

This is my function for creating the zoom pan behavior:

ZoomPanBehavior createZoomPanBehavior(

ZoomMode zoomMode,

) {

return ZoomPanBehavior(

zoomMode: zoomMode,

enableMouseWheelZooming: true,

enablePanning: true,

enablePinching: true,

enableSelectionZooming: true,

);

}

Wondering if this is a bug or something I’ve not included in my code? Thanks in advance.

[Natrayan Ramalingam]

Hi, 

We tried to replicate the reported issue at our end. We attempted the following to reproduce it:

1. Verified with the latest chart version 31.1.22.

2. Tested on Windows, Web, and Android platforms.

3. Checked with all zoom modes (x, y, xy) with and without the Shift key.

4. Checked with ZoomMode.x and anchorRangeToVisiblePoints set to both true and false.

Unfortunately, we were not able to reproduce the behavior. To proceed, please share the following so we can assist you better:

1. From the shared code snippet, the exact zoomMode used during the Shift-key scenario (whether it switches to ZoomMode.xy or something else) and how you toggle it.  

2. Whether any custom pointer/keyboard handling is used in sample.

3. Along with screenshots or screen recordings showing the behavior.

We have attached a runnable sample below. Kindly modify this sample to replicate your scenario and share it back with us.

anchorRangeToVisiblePoints: Zooming and Panning in Flutter Cartesian Charts widget | Syncfusion

ZoomMode: Zooming and Panning in Flutter Cartesian Charts widget | Syncfusion

Regards,

Natrayan

Attachment: F_197551_70d093dc.zip

[Software Developer]

Hello,

Thanks for getting back to me!

Some additional information

• I am using the latest syncfusion_flutter_charts version, 31.1.22.
• I am using the latest Flutter version, Flutter 3.35.5.
• I am using Flutter Web, and running the application on Chrome and Safari.
• I encounter this problem no matter the ZoomMode.
• I only can see that I encounter this issue when I specifically use the mouse scroll wheel, for instance using the trackpad works as expected.
• In my original sample, I use a focusNode to listen for a shift KeyDownEvent or KeyUpEvent. When one of those events occur, I call createZoomPanBehavior. (I strongly believe this is not related to the issue, as I encounter the bug without this. See below. I thought I’d still provide this information as per your request however).

I ran the runnable sample that you provided, but unfortunately I encountered the problem again instantly. Holding shift and scrolling using the mouse wheel always zooms inwards no matter the direction.

So that I can show the error occurring in a screen recording, I added some code to your sample to display this.

I Imported these libraries:

import 'dart:async';

import 'dart:html' as html;

I added these variables:

String? lastScrollAction;

Timer? _scrollTimer;

Added this to the initState function:

html.window.onWheel.listen((event) {

// Set lastScrollAction

if (event.deltaY > 0) {

if (lastScrollAction != 'Scrolled Down') {

lastScrollAction = 'Scrolled Down';

setState(() {});

}

} else if (event.deltaY < 0) {

if (lastScrollAction != 'Scrolled Up') {

lastScrollAction = 'Scrolled Up';

setState(() {});

}

} else if (event.shiftKey) {

if (event.deltaX > 0) {

if (lastScrollAction != 'Scrolled Down + Shift') {

lastScrollAction = 'Scrolled Down + Shift';

setState(() {});

}

} else if (event.deltaX < 0) {

if (lastScrollAction != 'Scrolled Up + Shift') {

lastScrollAction = 'Scrolled Up + Shift';

setState(() {});

}

}

}

// Cancel any existing exit timers

_scrollTimer?.cancel();

// Set new scroll time to set lastScrollAction to null if mouse hasn't been scrolled for half a second

_scrollTimer = Timer(const Duration(milliseconds: 500), () {

if (mounted) {

setState(() {

lastScrollAction = null;

});

}

});

});

And included these two lines at the end of your row:

const SizedBox(width: 16),

Text('Last mouse wheel action: $lastScrollAction'),

As you can see in the attached screen recording, scrolling without shift works as expected, but with shift, the zooming always zooms inward. I discovered that scrolling normally will provide an event.deltaY number greater or less than 0, with event.deltaX being 0, but when you hold shift and scroll, the inverse happens, event.deltaY returns 0, and event.deltaX is a number greater or less than 0. This is most likely caused due to most browsers converting what would normally be a vertical scroll (deltaY) into a horizontal scroll (deltaX) event when you hold Shift and scroll the wheel. Assuming this is the case, I’d assume the chart should convert a ‘left’ scroll to scroll in, and a ‘right’ scroll to zoom out, rather than always inwards?

Thank you again in advance!

Attachment: Zooming_Issue_Screen_Recording.mp4_16635518.zip

[Preethika Selvam]

Hi,

We’ve analyzed your query and reviewed the code provided. Based on this, we modified our sample to replicate the reported behavior. However, we were unable to reproduce the issue - mouse wheel zooming works correctly in both directions (zoom in/out), with and without the keyboard keys Shift are pressed.

Additionally, we’d like to clarify that zooming in our chart does not depend on keyboard keys. When enableMouseWheelZooming is set to true, the zooming behavior is directly tied to the mouse wheel scroll direction:

·        Scrolling upward performs a zoom-in.

·        Scrolling downward performs a zoom-out.

This behavior is directly tied to the mouse wheel and does not depend on keyboard input, as our chart does not have built-in support for keyboard-based zooming.

From your description, it seems you might be implementing custom zooming logic using keyboard interactions. So, we kindly request you modify the attached sample to replicate the issue and share it back with us with the full runnable sample. This will help us investigate further and assist you more effectively.

Regards,

Preethika Selvam.

Attachment: fb197551_e29be473.zip

[Software Developer]

Hi,

Thank you for your ongoing support.

Unfortunately I still encounter the problem with your samples, even without modifying it. However I tried to replicate this problem using a windows device and could not replicate it. I tried multiple devices and found that this problem specifically happens to those using an Apple Mac. This must be because Apple Macs interpret Shift + Scroll as a horizontal scroll. The Syncfusion chart receives the horizontal scroll, and zooms the chart in. So it would be great use if the Syncfusion chart interpreted a horizontal ‘left’ scroll to zoom in, and a horizontal ‘right’ scroll to zoom out, rather than always zooming inwards no matter the direction of the horizontal scroll.

Kind Regards.

[Praveen Balu]

Hi,

Thanks for the detailed explanation. We were able to replicate your reported case and currently, the SfCartesianChart does not support keyboard interaction using Shift + Scroll for horizontal scroll in zoom and pan on macOS. However, we have considered your requirement as a new feature and logged feature request for it in our feedback portal.

We will prioritize the features of every release based on demand and priority. So, this feature will be available in any of our upcoming releases. You can also track the status of the feature using the feedback link provided below.

FR link - MacOS - Provide Horizontal Scroll Direction Support for Cartesian Charts zoom and pan in Flutter | Feedback Portal

Regards,

Praveen Balu.