diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
index 197841e2031d7c..b3b62ae308803b 100644
--- a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
+++ b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -424,6 +424,7 @@ export const transformPlotlyJsonToHeatmapProps = (jsonObj: any): IHeatMapChartPr
     rangeValuesForColorScale,
     hideLegend: true,
     showYAxisLables: true,
+    sortOrder: 'None',
   };
 };
 
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 6ddf3dc222c341..2ddddb7a1ef90e 100644
--- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
+++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.base.tsx
@@ -601,42 +601,48 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
      * rectangles and then format the x and y datapoints respectively
      */
     Object.keys(yPoints).forEach((item: string) => {
-      if (this._xAxisType === XAxisTypes.StringAxis) {
-        yPoints[item].forEach((datapoint: IHeatMapChartDataPoint) => {
-          if (this._xAxisType === XAxisTypes.StringAxis) {
-            datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
-          }
-        });
-      }
-      if (this._xAxisType !== XAxisTypes.StringAxis) {
-        yPoints[item]
-          .sort((a: IHeatMapChartDataPoint, b: IHeatMapChartDataPoint) => {
-            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);
+      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._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);
+              }
+            })
+        : yPoints[item].forEach((datapoint: IHeatMapChartDataPoint) => {
+            if (this._xAxisType === XAxisTypes.StringAxis) {
+              datapoint.x = this._getFormattedLabelForXAxisDataPoint(datapoint.x as string);
             }
           });
-      }
     });
     /**
      * if  y-axis data points are of type date or number or if we have string formatter,
@@ -691,7 +697,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       if (this._xAxisType === XAxisTypes.DateAxis || this._xAxisType === XAxisTypes.NumericAxis) {
         return +a - +b;
       } else {
-        return 0;
+        return this.props.sortOrder === 'None' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
       }
     });
     xAxisPoints = unFormattedXAxisDataPoints.map((xPoint: string) => {
@@ -718,7 +724,7 @@ export class HeatMapChartBase extends React.Component<IHeatMapChartProps, IHeatM
       if (this._yAxisType === YAxisType.DateAxis || this._yAxisType === YAxisType.NumericAxis) {
         return +a - +b;
       } else {
-        return 0;
+        return this.props.sortOrder === 'None' ? 0 : a.toLowerCase() > b.toLowerCase() ? 1 : -1;
       }
     });
     yAxisPoints = unFormattedYAxisDataPoints.map((yPoint: string) => {
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 6593212253b7cd..c98cfa43c26780 100644
--- a/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
+++ b/packages/charts/react-charting/src/components/HeatMapChart/HeatMapChart.types.ts
@@ -113,6 +113,11 @@ export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<k
    *@default false
    *Used for showing complete y axis lables   */
   showYAxisLables?: boolean;
+
+  /**
+   * The prop used to decide order of string axis labels
+   */
+  sortOrder?: string;
 }
 
 /**