diff --git a/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
index d870da797b8..30927cd6ae7 100644
--- a/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
+++ b/packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
@@ -1,6 +1,4 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-
-import { TimeRange } from '@grafana/data';
+import { useEffect, useLayoutEffect, useState } from 'react';
 
 import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
 import { PlotSelection } from '../types';
@@ -9,7 +7,6 @@ import { pluginLog } from '../utils';
 interface ZoomPluginProps {
   onZoom: (range: { from: number; to: number }) => void;
   config: UPlotConfigBuilder;
-  timeRange: TimeRange;
 }
 
 // min px width that triggers zoom
@@ -18,14 +15,9 @@ const MIN_ZOOM_DIST = 5;
 /**
  * @alpha
  */
-export const ZoomPlugin = ({ onZoom, config, timeRange }: ZoomPluginProps) => {
+export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
   const [selection, setSelection] = useState<PlotSelection | null>(null);
 
-  const refTimeRange = useRef<TimeRange>(timeRange);
-  useEffect(() => {
-    refTimeRange.current = timeRange;
-  }, [timeRange]);
-
   useEffect(() => {
     if (selection) {
       pluginLog('ZoomPlugin', false, 'selected', selection);
@@ -59,9 +51,11 @@ export const ZoomPlugin = ({ onZoom, config, timeRange }: ZoomPluginProps) => {
 
     config.setCursor({
       bind: {
-        dblclick: () => () => {
-          const frTs = refTimeRange.current.from.valueOf();
-          const toTs = refTimeRange.current.to.valueOf();
+        dblclick: (u) => () => {
+          let xScale = u.scales.x;
+
+          const frTs = xScale.min!;
+          const toTs = xScale.max!;
           const pad = (toTs - frTs) / 2;
 
           onZoom({ from: frTs - pad, to: toTs + pad });
diff --git a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
index 71443fa8448..a8964f0c6ad 100644
--- a/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
+++ b/public/app/plugins/panel/candlestick/CandlestickPanel.tsx
@@ -260,7 +260,7 @@ export const CandlestickPanel = ({
 
         return (
           <>
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             <TooltipPlugin
               data={alignedDataFrame}
               config={config}
diff --git a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
index 4f88802ed50..37eefe8e0be 100644
--- a/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
+++ b/public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
@@ -191,7 +191,7 @@ export const StateTimelinePanel = ({
 
         return (
           <>
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
 
             <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
 
diff --git a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
index 1cb0152c335..be421751558 100644
--- a/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
+++ b/public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
@@ -215,7 +215,7 @@ export const StatusHistoryPanel = ({
 
         return (
           <>
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             {renderTooltip(alignedFrame)}
             <OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
           </>
diff --git a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
index f201cbeed76..c5d26d01a71 100644
--- a/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
+++ b/public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
@@ -88,7 +88,7 @@ export const TimeSeriesPanel = ({
         return (
           <>
             <KeyboardPlugin config={config} />
-            <ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
+            <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             {options.tooltip.mode === TooltipDisplayMode.None || (
               <TooltipPlugin
                 frames={frames}