diff --git a/datahub/webapp/components/AppAdmin/AppAdmin.scss b/datahub/webapp/components/AppAdmin/AppAdmin.scss
index 397082df9..aa0f637c8 100644
--- a/datahub/webapp/components/AppAdmin/AppAdmin.scss
+++ b/datahub/webapp/components/AppAdmin/AppAdmin.scss
@@ -64,6 +64,7 @@
                     flex-grow: 1;
                     text-align: left;
                     overflow-y: hidden;
+                    overflow-x: hidden;
                     .AdminForm-button-box {
                         display: flex;
                         justify-content: center;
diff --git a/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx b/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
index 4029beaf0..00454b099 100644
--- a/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
+++ b/datahub/webapp/components/DataDocChartCell/DataDocChartComposer.tsx
@@ -128,14 +128,6 @@ const DataDocChartComposerComponent: React.FunctionComponent<
         values.xIndex,
     ]);
 
-    const tableData: any[][] = React.useMemo(() => {
-        if (tableTab === 'original') {
-            return statementResultData;
-        } else {
-            return chartData;
-        }
-    }, [tableTab, statementResultData, chartData]);
-
     // getting redux state
     const queryCellOptions = useSelector((state: IStoreState) => {
         const cellList = state.dataDoc.dataDocById[dataDocId].cells;
@@ -782,7 +774,11 @@ const DataDocChartComposerComponent: React.FunctionComponent<
         dataDOM = (
             <div className="DataDocChartComposer-data">
                 <StatementResultTable
-                    data={tableData}
+                    data={
+                        tableTab === 'original'
+                            ? statementResultData
+                            : chartData
+                    }
                     paginate={true}
                     maxNumberOfRowsToShow={5}
                 />
diff --git a/datahub/webapp/lib/chart/chart-data-transformation.ts b/datahub/webapp/lib/chart/chart-data-transformation.ts
index 538dae31f..475f36987 100644
--- a/datahub/webapp/lib/chart/chart-data-transformation.ts
+++ b/datahub/webapp/lib/chart/chart-data-transformation.ts
@@ -1,6 +1,6 @@
 import { cloneDeep, range } from 'lodash';
 import { ChartDataAggType } from 'const/dataDocChart';
-import { sortTable } from './chart-utils';
+import { sortTable, getValueDataType } from './chart-utils';
 
 const emptyCellValue = 'No Value';
 
@@ -228,17 +228,26 @@ function aggregateData(
     return aggregatedData;
 }
 
-export function sortData(
+export function sortTableWithDefaultIdx(
     data: any[][],
     idx: number,
     ascending: boolean,
     xIdx: number
 ) {
-    const sortIdx = idx ?? (isNaN(data[0][xIdx]) ? undefined : 0);
-    if (sortIdx != null) {
-        return sortTable(data, sortIdx, ascending);
+    if (idx != null) {
+        // if idx is provided then call sortTable as is
+        return sortTable(data, idx, ascending);
     } else {
-        return data;
+        // if idx is not provided then default idx to the xIndex of the table
+        // only sort if the column type for that index is either 'date' 'datetime' or 'number'
+        if (
+            getValueDataType(data[0][xIdx]) === 'string' ||
+            getValueDataType(data[0][xIdx]) === null
+        ) {
+            return data;
+        } else {
+            return sortTable(data, xIdx, ascending);
+        }
     }
 }
 
@@ -283,6 +292,11 @@ export function transformData(
 
     return [
         transformedData[0],
-        ...sortData(transformedData.slice(1), sortIdx, sortAsc, xAxisIdx),
+        ...sortTableWithDefaultIdx(
+            transformedData.slice(1),
+            sortIdx,
+            sortAsc,
+            xAxisIdx
+        ),
     ];
 }