diff --git a/.playground/playground.tsx b/.playground/playground.tsx
index 969b107212..1de5c98987 100644
--- a/.playground/playground.tsx
+++ b/.playground/playground.tsx
@@ -148,7 +148,12 @@ export const SWIM_LANE_DATA = [
 export class Playground extends React.Component<any, { highlightedData?: HeatmapSpec['highlightedData'] }> {
   constructor(props: any) {
     super(props);
-    this.state = {};
+    this.state = {
+      highlightedData: {
+        x: [1572874200000, 1572897600000],
+        y: ['Overall', 'test'],
+      },
+    };
   }
 
   onBrushEnd: HeatmapConfig['onBrushEnd'] = (e) => {
diff --git a/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
index 2ea2d27db0..423dc79841 100644
--- a/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
+++ b/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -357,16 +357,18 @@ export function shapeViewModel(
     const width = endFromScale - startFromScale + (isOutOfRange ? cellWidth : 0);
 
     // resolve Y coordinated making sure the order is correct
-    const { y: yStart, totalHeight } = y.reduce(
-      (acc, current, i) => {
-        if (i === 0) {
-          acc.y = yScale(current) || 0;
-        }
-        acc.totalHeight += cellHeight;
-        return acc;
-      },
-      { y: 0, totalHeight: 0 },
-    );
+    const { y: yStart, totalHeight } = y
+      .filter((v) => yValues.includes(v))
+      .reduce(
+        (acc, current, i) => {
+          if (i === 0) {
+            acc.y = yScale(current) || 0;
+          }
+          acc.totalHeight += cellHeight;
+          return acc;
+        },
+        { y: 0, totalHeight: 0 },
+      );
 
     return {
       x: xStart,