diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts index 882cf83d2b2..9c71a3e4a99 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotThresholds.ts @@ -24,7 +24,7 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) { ? [10, 10] : null; - function addLines(u: uPlot, steps: Threshold[], theme: GrafanaTheme2, xMin: number, xMax: number, yScaleKey: string) { + function addLines(u: uPlot, yScaleKey: string, steps: Threshold[], theme: GrafanaTheme2) { let ctx = u.ctx; // Thresholds below a transparent threshold is treated like "less than", and line drawn previous threshold @@ -61,9 +61,9 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) { color.setAlpha(0.7); } - let x0 = Math.round(u.valToPos(xMin!, 'x', true)); + let x0 = Math.round(u.bbox.left); let y0 = Math.round(u.valToPos(step.value, yScaleKey, true)); - let x1 = Math.round(u.valToPos(xMax!, 'x', true)); + let x1 = Math.round(u.bbox.left + u.bbox.width); let y1 = Math.round(u.valToPos(step.value, yScaleKey, true)); ctx.beginPath(); @@ -75,12 +75,12 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) { } } - function addAreas(u: uPlot, steps: Threshold[], theme: GrafanaTheme2) { + function addAreas(u: uPlot, yScaleKey: string, steps: Threshold[], theme: GrafanaTheme2) { let ctx = u.ctx; let grd = scaleGradient( u, - u.series[1].scale!, + yScaleKey, steps.map((step) => { let color = tinycolor(theme.visualization.getColorByName(step.color)); @@ -125,15 +125,15 @@ export function getThresholdsDrawHook(options: UPlotThresholdOptions) { switch (config.mode) { case GraphTresholdsStyleMode.Line: case GraphTresholdsStyleMode.Dashed: - addLines(u, steps, theme, xMin, xMax, scaleKey); + addLines(u, scaleKey, steps, theme); break; case GraphTresholdsStyleMode.Area: - addAreas(u, steps, theme); + addAreas(u, scaleKey, steps, theme); break; case GraphTresholdsStyleMode.LineAndArea: case GraphTresholdsStyleMode.DashedAndArea: - addAreas(u, steps, theme); - addLines(u, steps, theme, xMin, xMax, scaleKey); + addAreas(u, scaleKey, steps, theme); + addLines(u, scaleKey, steps, theme); } ctx.restore();