diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js
index f2e3624f0..b377c71c5 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/Heatmap.js
@@ -22,6 +22,8 @@ import PropTypes from 'prop-types';
 import 'd3-svg-legend';
 import d3tip from 'd3-tip';
 import {
+  getColumnLabel,
+  getMetricLabel,
   getNumberFormatter,
   NumberFormats,
   getSequentialSchemeRegistry,
@@ -44,8 +46,8 @@ const propTypes = {
   height: PropTypes.number,
   bottomMargin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   colorScheme: PropTypes.string,
-  columnX: PropTypes.string,
-  columnY: PropTypes.string,
+  columnX: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  columnY: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
   leftMargin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   metric: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   normalized: PropTypes.bool,
@@ -338,12 +340,13 @@ function Heatmap(element, props) {
       const k = d3.mouse(this);
       const m = Math.floor(scale[0].invert(k[0]));
       const n = Math.floor(scale[1].invert(k[1]));
-      const metricLabel = typeof metric === 'object' ? metric.label : metric;
       if (m in matrix && n in matrix[m]) {
         const obj = matrix[m][n];
-        s += `<div><b>${columnX}: </b>${obj.x}<div>`;
-        s += `<div><b>${columnY}: </b>${obj.y}<div>`;
-        s += `<div><b>${metricLabel}: </b>${valueFormatter(obj.v)}<div>`;
+        s += `<div><b>${getColumnLabel(columnX)}: </b>${obj.x}<div>`;
+        s += `<div><b>${getColumnLabel(columnY)}: </b>${obj.y}<div>`;
+        s += `<div><b>${getMetricLabel(metric)}: </b>${valueFormatter(
+          obj.v,
+        )}<div>`;
         if (showPercentage) {
           s += `<div><b>%: </b>${fp(normalized ? obj.rank : obj.perc)}<div>`;
         }