Show Sidebar Hide Sidebar
Fork on GitHub

Zoom, Pan, and Hover Controls

How to zoom, pan, and hover in Chart Studio

Step 1

Introduction

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:

  1. Zoom-in and Zoom-out/Autoscale the plot;
  2. Zoom-in along axes;
  3. Pan and reset the plot;
  4. Pan along axes;
  5. Zoom-out/Autoscale/Reset along an axis;
  6. Change Drag/Hover mode;
  7. Autoscale/Reset axes via Mode Bar.

Make sure to check out our other tutorials!

Step 2

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.

Step 3

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.

Drag Zoom

Step 4

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.

Zoom Axis

Step 5

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.

Drag Pan

Please note that, by default, the plot's drag mode is set to 'Zoom'.

Step 6

Pan along axes

To Pan along one axis, click and drag from the center of the axis.

Example after

Step 7

Zoom-out/Autoscale/Reset an axis

Double-click on a single axis to autoscale along that axis alone.

Example after

Step 8

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.

Drag Mode

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.

Hover Mode

Step 9

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.