Zoom, Pan, and Hover Controls
How to zoom, pan, and hover in Chart Studio
Chart Studio offers free, online tools for analyzing data and making graphs. You can bring your graphing and data analysis to the next level with zoom, pan, and hover.
In this guide, we'll show you how to:
- Zoom-in and Zoom-out/Autoscale the plot;
- Zoom-in along axes;
- Pan and reset the plot;
- Pan along axes;
- Zoom-out/Autoscale/Reset along an axis;
- Change Drag/Hover mode;
- Autoscale/Reset axes via Mode Bar.
Make sure to check out our other tutorials!
Try the Example
Before getting started with your own dataset, you can use the data featured in this tutorial by clicking on 'Open This Data in Chart Studio' on the left-hand side. It'll open in Chart Studio.
Zoom-in and Zoom-out/Autoscale the plot
If the plot's drag mode is set to 'Zoom', click and drag on the plot to zoom-in and double-click to zoom-out completely, i.e., autoscale both the axes.
Zoom-in along axes
To zoom along only one axis, click and drag near the edges of either one of the axes. Additionally, to zoom-in along both the axes together, click and drag near the corners of both the axes.
Pan and Reset the plot
If the plot's drag mode is set to 'Pan', click and drag on the plot to pan and double-click to reset the pan.
Please note that, by default, the plot's drag mode is set to 'Zoom'.
Pan along axes
To Pan along one axis, click and drag from the center of the axis.
Zoom-out/Autoscale/Reset an axis
Double-click on a single axis to autoscale along that axis alone.
Change Drag/Hover mode via Chart Studio
First, head to the 'Edit' page of your plot by hovering on the plot's thumbnail and clicking on the 'Edit' button. This will redirect you to the [Chart Studio Workspace]((https://plot.ly/create/). When you are in the workspace, go to the 'General' section under the 'Style' menu.
To change the drag mode, head to the 'Drag' property under the 'Interactions' sub-panel and set the 'Mode' attribute using the dropdown menu.
To change the hover mode, head to the 'Hover' property in the same 'Interactions' sub-panel and set the 'Mode' attribute using the dropdown menu.
Change Drag/Hover mode and Autoscale/Reset axes via Mode Bar
To change the drag/hover mode and autoscale/reset axes uisng Mode Bar, please refer Mode Bar documentation.