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

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

@@ -30,6 +30,8 @@ import {
   t,
   AxisType,
   getXAxisLabel,
+  isPhysicalColumn,
+  isDefined,
 } from '@superset-ui/core';
 import { isDerivedSeries } from '@superset-ui/chart-controls';
 import { EChartsCoreOption, SeriesOption } from 'echarts';
@@ -148,19 +150,25 @@ export default function transformProps(
 
   const colorScale = CategoricalColorNamespace.getScale(colorScheme as string);
   const rebasedData = rebaseForecastDatum(data, verboseMap);
-  const xAxisCol = getXAxisLabel(chartProps.rawFormData) as string;
+  let xAxisLabel = getXAxisLabel(chartProps.rawFormData) as string;
+  if (
+    isPhysicalColumn(chartProps.rawFormData?.x_axis) &&
+    isDefined(verboseMap[xAxisLabel])
+  ) {
+    xAxisLabel = verboseMap[xAxisLabel];
+  }
   const isHorizontal = orientation === OrientationType.horizontal;
   const { totalStackedValues, thresholdValues } = extractDataTotalValues(
     rebasedData,
     {
       stack,
       percentageThreshold,
-      xAxisCol,
+      xAxisCol: xAxisLabel,
     },
   );
   const rawSeries = extractSeries(rebasedData, {
     fillNeighborValue: stack && !forecastEnabled ? 0 : undefined,
-    xAxis: xAxisCol,
+    xAxis: xAxisLabel,
     removeNulls: seriesType === EchartsTimeseriesSeriesType.Scatter,
     stack,
     totalStackedValues,
@@ -175,7 +183,7 @@ export default function transformProps(
     Object.values(rawSeries).map(series => series.name as string),
   );
   const isAreaExpand = stack === AreaChartExtraControlsValue.Expand;
-  const xAxisDataType = dataTypes?.[xAxisCol] ?? dataTypes?.[xAxisOrig];
+  const xAxisDataType = dataTypes?.[xAxisLabel] ?? dataTypes?.[xAxisOrig];
 
   const xAxisType = getAxisType(xAxisDataType);
   const series: SeriesOption[] = [];
@@ -229,7 +237,7 @@ export default function transformProps(
           transformFormulaAnnotation(
             layer,
             data,
-            xAxisCol,
+            xAxisLabel,
             xAxisType,
             colorScale,
             sliceId,
@@ -452,7 +460,7 @@ export default function transformProps(
     onContextMenu,
     xValueFormatter: tooltipFormatter,
     xAxis: {
-      label: xAxisCol,
+      label: xAxisLabel,
       type: xAxisType,
     },
   };