fix: categorical x-axis can't apply the label of column (#21869)

superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts

@@ -30,6 +30,8 @@ import {
   TimeseriesChartDataResponseResult,
   TimeseriesDataRecord,
   getXAxisLabel,
+  isPhysicalColumn,
+  isDefined,
 } from '@superset-ui/core';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
 import {
@@ -152,23 +154,29 @@ export default function transformProps(
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
 
-  const xAxisCol = getXAxisLabel(
+  let xAxisLabel = getXAxisLabel(
     chartProps.rawFormData as QueryFormData,
   ) as string;
+  if (
+    isPhysicalColumn(chartProps.rawFormData?.x_axis) &&
+    isDefined(verboseMap[xAxisLabel])
+  ) {
+    xAxisLabel = verboseMap[xAxisLabel];
+  }
 
   const rebasedDataA = rebaseForecastDatum(data1, verboseMap);
   const rawSeriesA = extractSeries(rebasedDataA, {
     fillNeighborValue: stack ? 0 : undefined,
-    xAxis: xAxisCol,
+    xAxis: xAxisLabel,
   });
   const rebasedDataB = rebaseForecastDatum(data2, verboseMap);
   const rawSeriesB = extractSeries(rebasedDataB, {
     fillNeighborValue: stackB ? 0 : undefined,
-    xAxis: xAxisCol,
+    xAxis: xAxisLabel,
   });
 
   const dataTypes = getColtypesMapping(queriesData[0]);
-  const xAxisDataType = dataTypes?.[xAxisCol] ?? dataTypes?.[xAxisOrig];
+  const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
   const xAxisType = getAxisType(xAxisDataType);
   const series: SeriesOption[] = [];
   const formatter = getNumberFormatter(contributionMode ? ',.0%' : yAxisFormat);
@@ -205,7 +213,7 @@ export default function transformProps(
     {
       stack,
       percentageThreshold,
-      xAxisCol,
+      xAxisCol: xAxisLabel,
     },
   );
   const {
@@ -214,7 +222,7 @@ export default function transformProps(
   } = extractDataTotalValues(rebasedDataB, {
     stack: Boolean(stackB),
     percentageThreshold,
-    xAxisCol,
+    xAxisCol: xAxisLabel,
   });
 
   annotationLayers
@@ -225,7 +233,7 @@ export default function transformProps(
           transformFormulaAnnotation(
             layer,
             data1,
-            xAxisCol,
+            xAxisLabel,
             xAxisType,
             colorScale,
             sliceId,
@@ -502,7 +510,7 @@ export default function transformProps(
     onContextMenu,
     xValueFormatter: tooltipFormatter,
     xAxis: {
-      label: xAxisCol,
+      label: xAxisLabel,
       type: xAxisType,
     },
   };