From a24940bfd754c905b373d18b2b6aa9cb7999d8d6 Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Mon, 29 Apr 2024 22:21:15 +0100
Subject: [PATCH] [v11.0.x] Heatmap: Fix histogram highlighted series (#87092)

Heatmap: Fix histogram highlighted series (#86955)

(cherry picked from commit e3719471d5daccbad3fcc736144c942f2a4cd4cb)

Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
---
 .../plugins/panel/heatmap/renderHistogram.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/public/app/plugins/panel/heatmap/renderHistogram.tsx b/public/app/plugins/panel/heatmap/renderHistogram.tsx
index 6169151089c..14278fcfcc2 100644
--- a/public/app/plugins/panel/heatmap/renderHistogram.tsx
+++ b/public/app/plugins/panel/heatmap/renderHistogram.tsx
@@ -10,11 +10,12 @@ export function renderHistogram(
   let histCtx = can.current?.getContext('2d');
 
   if (histCtx != null) {
+    const barsGap = 1;
     let fromIdx = index;
 
-    while (xVals[fromIdx--] === xVals[index]) {}
-
-    fromIdx++;
+    while (xVals[fromIdx - 1] === xVals[index]) {
+      fromIdx--;
+    }
 
     let toIdx = fromIdx + yBucketCount;
 
@@ -37,16 +38,14 @@ export function renderHistogram(
 
       if (c > 0) {
         let pctY = c / maxCount;
-        let pctX = j / (yBucketCount + 1);
+        let pctX = j / yBucketCount;
 
         let p = i === index ? pHov : pRest;
 
-        p.rect(
-          Math.round(histCanWidth * pctX),
-          Math.round(histCanHeight * (1 - pctY)),
-          Math.round(histCanWidth / yBucketCount),
-          Math.round(histCanHeight * pctY)
-        );
+        const xCoord = histCanWidth * pctX + barsGap;
+        const width = histCanWidth / yBucketCount - barsGap;
+
+        p.rect(xCoord, Math.round(histCanHeight * (1 - pctY)), width, Math.round(histCanHeight * pctY));
       }
 
       i++;