Docs: Add panel time zoom with mouse (#113721)

Co-authored-by: Jesse David Peterson <jesdavpet@users.noreply.github.com> Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
2025-11-19 21:27:11 +00:00
parent 53c39ccda3
commit fabb4a603d
7 changed files with 85 additions and 0 deletions
@@ -175,6 +175,52 @@ By hovering over a panel with the mouse you can use some shortcuts that will tar
 - `pl`: Hide or show legend
 - `pr`: Remove Panel

+## Zoom panel time range
+
+You can zoom the panel time range in and out, which in turn, changes the dashboard time range.
+
+This feature is supported for the following visualizations:
+
+- Candlestick
+- Heatmap
+- State timeline
+- Status history
+- Time series
+
+### Zoom in
+
+Click and drag on the panel to zoom in on a particular time range.
+
+The following screen recordings show this interaction in the time series and x visualizations:
+
+Time series
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-zoom-in-mouse.mp4" >}}
+
+Candlestick
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-candle-panel-time-zoom-in-mouse.mp4" >}}
+
+### Zoom out
+
+Double-click anywhere on the panel to zoom out the time range.
+
+The range doubles with each double-click, adding equal time to each side of the range.
+For example, if the original time range is from 9:00 to 9:59, the time range changes as follows with each double-click:
+
+- Next range: 8:30 - 10:29
+- Next range: 7:30 - 11:29
+
+The following screen recordings demonstrate the preceding example in the time series and x visualizations:
+
+Time series
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-ts-time-zoom-out-mouse.mp4" >}}
+
+Heatmap
+
+{{< video-embed src="/media/docs/grafana/panels-visualizations/recording-heatmap-panel-time-zoom-out-mouse.mp4" >}}
+
 ## Add a panel

 To add a panel in a new dashboard click **+ Add visualization** in the middle of the dashboard: