diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
index 8be4df87406..ff7614839b5 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts
@@ -2,7 +2,7 @@ import tinycolor from 'tinycolor2';
 import uPlot from 'uplot';
 
 import { GrafanaTheme2, Threshold, ThresholdsConfig, ThresholdsMode } from '@grafana/data';
-import { GraphThresholdsStyleConfig, GraphThresholdsStyleMode } from '@grafana/schema';
+import { GraphThresholdsStyleConfig, GraphThresholdsStyleMode, ScaleOrientation } from '@grafana/schema';
 
 import { getGradientRange, scaleGradient } from './gradientFills';
 
@@ -58,10 +58,13 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) {
         color.setAlpha(0.7);
       }
 
-      let x0 = Math.round(u.bbox.left);
-      let y0 = Math.round(u.valToPos(step.value, yScaleKey, true));
-      let x1 = Math.round(u.bbox.left + u.bbox.width);
-      let y1 = Math.round(u.valToPos(step.value, yScaleKey, true));
+      const isHorizontal = u.scales.x!.ori === ScaleOrientation.Horizontal;
+      const scaleVal = u.valToPos(step.value, yScaleKey, true);
+
+      let x0 = Math.round(isHorizontal ? u.bbox.left : scaleVal);
+      let y0 = Math.round(isHorizontal ? scaleVal : u.bbox.top);
+      let x1 = Math.round(isHorizontal ? u.bbox.left + u.bbox.width : scaleVal);
+      let y1 = Math.round(isHorizontal ? scaleVal : u.bbox.top + u.bbox.height);
 
       ctx.beginPath();
       ctx.moveTo(x0, y0);