diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
index 4d4edb6c5f0549..8a7d4d79b8bb31 100644
--- a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
+++ b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -244,14 +244,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
         />
       );
     case 'heatmap':
-      return (
-        <HeatMapChart
-          {...transformPlotlyJsonToHeatmapProps(plotlySchema)}
-          legendProps={{ onChange: onActiveLegendsChange, canSelectMultipleLegends: false, selectedLegends: [] }}
-          componentRef={chartRef}
-          calloutProps={{ layerProps: { eventBubblingEnabled: true } }}
-        />
-      );
+      return <HeatMapChart {...transformPlotlyJsonToHeatmapProps(plotlySchema)} />;
     case 'sankey':
       return (
         <SankeyChart
diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
index ddb6fabc0ecba0..cbd89e2e80b38f 100644
--- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -601,45 +601,42 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
      * rectangles and then format the x and y datapoints respectively
      */
     Object.keys(yPoints).forEach((item: string) => {
-      this.props.sortOrder !== 'none'
-        ? yPoints[item]
-            .sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
-              if (this._xAxisType === XAxisTypes.StringAxis) {
-                return this.props.sortOrder === 'none'
-                  ? 0
-                  : (a.x as string).toLowerCase() > (b.x as string).toLowerCase()
-                  ? 1
-                  : -1;
-              } else if (this._xAxisType === XAxisTypes.DateAxis) {
-                return (a.x as Date).getTime() - (b.x as Date).getTime();
-              } else if (this._xAxisType === XAxisTypes.NumericAxis) {
-                return +(a.x as string) > +(b.x as string) ? 1 : -1;
-              } else {
-                return a.x > b.x ? 1 : -1;
-              }
-            })
-            .forEach((datapoint: IHeatMapChartDataPoint) => {
-              if (this._xAxisType === XAxisTypes.DateAxis) {
-                datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);
-              }
-              if (this._xAxisType === XAxisTypes.NumericAxis) {
-                datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);
-              }
-              if (this._yAxisType === YAxisType.DateAxis) {
-                datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);
-              }
-              if (this._yAxisType === YAxisType.NumericAxis) {
-                datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);
-              }
-              if (this._yAxisType === YAxisType.StringAxis) {
-                datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);
-              }
-            })
-        : yPoints[item].forEach((datapoint: IHeatMapChartDataPoint) => {
-            if (this._xAxisType === XAxisTypes.StringAxis) {
-              datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
-            }
-          });
+      yPoints[item]
+        .sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
+          if (this._xAxisType === XAxisTypes.StringAxis) {
+            return this.props.sortOrder === 'none'
+              ? 0
+              : (a.x as string).toLowerCase() > (b.x as string).toLowerCase()
+              ? 1
+              : -1;
+          } else if (this._xAxisType === XAxisTypes.DateAxis) {
+            return (a.x as Date).getTime() - (b.x as Date).getTime();
+          } else if (this._xAxisType === XAxisTypes.NumericAxis) {
+            return +(a.x as string) > +(b.x as string) ? 1 : -1;
+          } else {
+            return a.x > b.x ? 1 : -1;
+          }
+        })
+        .forEach((datapoint: IHeatMapChartDataPoint) => {
+          if (this._xAxisType === XAxisTypes.DateAxis) {
+            datapoint.x = this._getStringFormattedDate(datapoint.x as string, xAxisDateFormatString);
+          }
+          if (this._xAxisType === XAxisTypes.NumericAxis) {
+            datapoint.x = this._getStringFormattedNumber(datapoint.x as string, xAxisNumberFormatString);
+          }
+          if (this._xAxisType === XAxisTypes.StringAxis) {
+            datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
+          }
+          if (this._yAxisType === YAxisType.DateAxis) {
+            datapoint.y = this._getStringFormattedDate(datapoint.y as string, yAxisDateFormatString);
+          }
+          if (this._yAxisType === YAxisType.NumericAxis) {
+            datapoint.y = this._getStringFormattedNumber(datapoint.y as string, yAxisNumberFormatString);
+          }
+          if (this._yAxisType === YAxisType.StringAxis) {
+            datapoint.y = this._getFormattedLabelForYAxisDataPoint(datapoint.y as string);
+          }
+        });
     });
     /**
      * if  y-axis data points are of type date or number or if we have string formatter,
diff --git a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
index 39c34f7cd6ed4d..2dcc3dbee94fd5 100644
--- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
+++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
@@ -115,8 +115,8 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
   showYAxisLables?: boolean;
 
   /**
-   * The prop used to decide order of string axis labels
-   */
+   * @default alphabetical
+   * The prop used to decide order of string axis labels */
   sortOrder?: 'none' | 'alphabetical';
 }
 
diff --git a/packages/charts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap b/packages/charts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
index 8c0783eae5abe9..6234c328964630 100644
--- a/packages/charts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
+++ b/packages/charts/react-charting/src/components/HeatMapChart/__snapshots__/HeatMapChartRTL.test.tsx.snap
@@ -1410,56 +1410,132 @@ exports[`HeatMapChart snapshot tests should render axis labels correctly When cu
           </g>
         </g>
         <g
-          aria-label="xPoint p3, yPoint p2. , No data available."
+          aria-label="xPoint p3, yPoint p2. Nasty, 25."
           data-is-focusable="true"
+          fill-opacity="1"
           role="img"
           tabindex="0"
           transform="translate(45.8415841584158, 22.34653465346534)"
         >
           <rect
-            fill="#ffffff"
+            fill="rgb(166, 207, 226)"
             height="114.98019801980197"
             width="286.23762376237624"
           />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(143.11881188118812, 57.49009900990099)"
+          >
+            25
+          </text>
         </g>
         <g
-          aria-label="xPoint p4, yPoint p2. , No data available."
+          aria-label="xPoint p4, yPoint p2. Excellent, 100."
           data-is-focusable="true"
+          fill-opacity="1"
           role="img"
           tabindex="-1"
           transform="translate(337.9207920792079, 22.34653465346534)"
         >
           <rect
-            fill="#ffffff"
+            fill="rgb(144, 180, 215)"
             height="114.98019801980197"
             width="286.23762376237624"
           />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(143.11881188118812, 57.49009900990099)"
+          >
+            100
+          </text>
         </g>
         <g
-          aria-label="xPoint p3, yPoint p1. , No data available."
+          aria-label="xPoint p3, yPoint p1. Excellent, 75."
           data-is-focusable="true"
+          fill-opacity="1"
           role="img"
           tabindex="-1"
           transform="translate(45.8415841584158, 139.67326732673268)"
         >
           <rect
-            fill="#ffffff"
+            fill="rgb(151, 189, 219)"
             height="114.98019801980197"
             width="286.23762376237624"
           />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(143.11881188118812, 57.49009900990099)"
+          >
+            75
+          </text>
         </g>
         <g
-          aria-label="xPoint p4, yPoint p1. , No data available."
+          aria-label="xPoint p4, yPoint p1. Nasty, 50."
           data-is-focusable="true"
+          fill-opacity="1"
           role="img"
           tabindex="-1"
           transform="translate(337.9207920792079, 139.67326732673268)"
         >
           <rect
-            fill="#ffffff"
+            fill="rgb(159, 198, 222)"
             height="114.98019801980197"
             width="286.23762376237624"
           />
+          <text
+            class=
+
+                {
+                  -moz-osx-font-smoothing: grayscale;
+                  -webkit-font-smoothing: antialiased;
+                  fill: #ffffff;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-size: 14px;
+                  font-weight: 600;
+                  pointer-events: none;
+                }
+            dominant-baseline="middle"
+            text-anchor="middle"
+            transform="translate(143.11881188118812, 57.49009900990099)"
+          >
+            50
+          </text>
         </g>
       </svg>
     </div>