Separate Zoom and Pan Features in CanvasJS
- This topic has 1 reply, 2 voices, and was last updated 1 month ago by
.
-
Currently, in CanvasJS, the zoom and pan functionalities are tightly integrated, meaning when users attempt to zoom in or out on a chart, the pan feature is automatically activated. This connection can sometimes be restrictive for users who wish to perform one action (zooming) without affecting the other (panning).
We request that you separate the zoom and pan features into distinct, independent controls. This would allow users to have more granular control over how they interact with their charts, improving the user experience for those who wish to:
Zoom In/Out: Zooming should adjust the scale of the chart without changing the viewport (panning). The zoom action should only affect the axis scaling.
Pan: Panning should move the chart along the axes without affecting the zoom level.
Expected Outcome:
Users can zoom and pan independently, enabling more efficient and focused interactions with the charts.
A better overall user experience, especially for interactive or time-series charts where both actions are essential but should be decoupled.
Thank you for your feedback regarding separate zoom and pan controls in CanvasJS. By design, our zoom and pan functionalities are integrated under zoomEnabled to ensure a streamlined user experience, as only one action—zooming or panning—can be performed at a time. This approach simplifies interaction, particularly for large datasets. While we appreciate your suggestion, we believe the current mode-switching design meets most use cases effectively. For an example of implementing separate buttons to toggle zooming and panning, please take a look at this CodePen
—
Vishwas R
Team CanvasJS
You must be logged in to reply to this topic.