diff --git a/packages/charts/src/chart_types/heatmap/state/chart_state.tsx b/packages/charts/src/chart_types/heatmap/state/chart_state.tsx
index e2321d47fd3..1cad48303bc 100644
--- a/packages/charts/src/chart_types/heatmap/state/chart_state.tsx
+++ b/packages/charts/src/chart_types/heatmap/state/chart_state.tsx
@@ -27,6 +27,7 @@ import { getTooltipAnchorSelector } from './selectors/get_tooltip_anchor';
 import { getSpecOrNull } from './selectors/heatmap_spec';
 import { isBrushAvailableSelector } from './selectors/is_brush_available';
 import { isBrushingSelector } from './selectors/is_brushing';
+import { isEmptySelector } from './selectors/is_empty';
 import { isTooltipVisibleSelector } from './selectors/is_tooltip_visible';
 import { createOnBrushEndCaller } from './selectors/on_brush_end_caller';
 import { createOnElementClickCaller } from './selectors/on_element_click_caller';
@@ -60,8 +61,8 @@ export class HeatmapState implements InternalChartState {
     return isBrushingSelector(globalState);
   }
 
-  isChartEmpty() {
-    return false;
+  isChartEmpty(globalState: GlobalChartState) {
+    return isEmptySelector(globalState);
   }
 
   getLegendItems(globalState: GlobalChartState) {
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts b/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts
index c98ad9726b1..67124eae801 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts
@@ -11,13 +11,14 @@ import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getDeselectedSeriesSelector } from '../../../../state/selectors/get_deselected_data_series';
 import { getColorScale } from './get_color_scale';
 import { getSpecOrNull } from './heatmap_spec';
+import { isEmptySelector } from './is_empty';
 
 const EMPTY_LEGEND: LegendItem[] = [];
 /** @internal */
 export const computeLegendSelector = createCustomCachedSelector(
-  [getSpecOrNull, getColorScale, getDeselectedSeriesSelector],
-  (spec, { bands }, deselectedDataSeries): LegendItem[] => {
-    if (spec === null) {
+  [getSpecOrNull, getColorScale, getDeselectedSeriesSelector, isEmptySelector],
+  (spec, { bands }, deselectedDataSeries, empty): LegendItem[] => {
+    if (spec === null || empty) {
       return EMPTY_LEGEND;
     }
 
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts b/packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts
index 3f4208d14bb..a9d5cc0dcc4 100644
--- a/packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts
@@ -15,6 +15,7 @@ import { computeChartElementSizesSelector } from './compute_chart_dimensions';
 import { getColorScale } from './get_color_scale';
 import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { getHeatmapTableSelector } from './get_heatmap_table';
+import { isEmptySelector } from './is_empty';
 
 const getDeselectedSeriesSelector = (state: GlobalChartState) => state.interactions.deselectedDataSeries;
 
@@ -27,8 +28,9 @@ export const getHeatmapGeometries = createCustomCachedSelector(
     getColorScale,
     getDeselectedSeriesSelector,
     getChartThemeSelector,
+    isEmptySelector,
   ],
-  (heatmapSpec, dims, heatmapTable, { bands, scale: colorScale }, deselectedSeries, theme): ShapeViewModel => {
+  (heatmapSpec, dims, heatmapTable, { bands, scale: colorScale }, deselectedSeries, theme, empty): ShapeViewModel => {
     // instead of using the specId, each legend item is associated with an unique band label
     const disabledBandLabels = new Set(
       deselectedSeries.map(({ specId }) => {
@@ -42,6 +44,8 @@ export const getHeatmapGeometries = createCustomCachedSelector(
       })
       .map(({ start, end }) => [start, end]);
 
-    return heatmapSpec ? render(heatmapSpec, dims, heatmapTable, colorScale, bandsToHide, theme) : nullShapeViewModel();
+    return heatmapSpec && !empty
+      ? render(heatmapSpec, dims, heatmapTable, colorScale, bandsToHide, theme)
+      : nullShapeViewModel();
   },
 );
diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/is_empty.ts b/packages/charts/src/chart_types/heatmap/state/selectors/is_empty.ts
new file mode 100644
index 00000000000..e7496daf8a8
--- /dev/null
+++ b/packages/charts/src/chart_types/heatmap/state/selectors/is_empty.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getHeatmapTableSelector } from './get_heatmap_table';
+
+/** @internal */
+export const isEmptySelector = createCustomCachedSelector([getHeatmapTableSelector], (heatmap): boolean => {
+  return heatmap.table.length === 0;
+});