feat(charts): improve negative stacked bar label positioning and accessibility (#37405)

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

@@ -31,6 +31,7 @@ import {
   ValueFormatter,
 } from '@superset-ui/core';
 import { SupersetTheme, isThemeDark } from '@apache-superset/core/ui';
+import { getContrastingColor } from '@superset-ui/core';
 import type {
   CallbackDataParams,
   DefaultStatesMixin,
@@ -142,28 +143,39 @@ export const getBaselineSeriesForStream = (
   };
 };
 
-export function transformNegativeLabelsPosition(
+export function optimizeBarLabelPlacement(
   series: SeriesOption,
   isHorizontal: boolean,
 ): TimeseriesDataRecord[] {
   /*
-   * Adjusts label position for negative values in bar series
+   * Adjusts label position for all values in bar series
+   * Positions labels inside bars at appropriate edges to avoid axis overlap
    * @param series - Array of series options
    * @param isHorizontal - Whether chart is horizontal
-   * @returns data with adjusted label positions for negative values
+   * @returns data with adjusted label positions for all values
    */
   const transformValue = (value: any) => {
     const [xValue, yValue] = Array.isArray(value) ? value : [null, null];
     const axisValue = isHorizontal ? xValue : yValue;
 
-    return axisValue < 0
-      ? {
-          value,
-          label: {
-            position: 'outside',
-          },
-        }
-      : value;
+    if (axisValue === null || axisValue === undefined) {
+      return value;
+    }
+
+    // Use inside positioning for all bar charts to avoid axis overlap
+    const labelPosition =
+      axisValue < 0
+        ? isHorizontal
+          ? 'insideLeft'
+          : 'insideBottom'
+        : isHorizontal
+          ? 'insideRight'
+          : 'insideTop';
+
+    return {
+      value,
+      label: { position: labelPosition },
+    };
   };
 
   return (series.data as TimeseriesDataRecord[]).map(transformValue);
@@ -337,8 +349,10 @@ export function transformSeries(
 
   return {
     ...series,
-    ...(Array.isArray(data) && seriesType === 'bar' && !stack
-      ? { data: transformNegativeLabelsPosition(series, isHorizontal) }
+    ...(Array.isArray(data) && seriesType === 'bar'
+      ? {
+          data: optimizeBarLabelPlacement(series, isHorizontal),
+        }
       : null),
     connectNulls,
     queryIndex,
@@ -371,8 +385,11 @@ export function transformSeries(
     symbolSize: markerSize,
     label: {
       show: !!showValue,
-      position: isHorizontal ? 'right' : 'top',
-      color: theme?.colorText,
+      position: stack ? 'inside' : isHorizontal ? 'right' : 'top',
+      color:
+        stack || seriesType === 'bar'
+          ? getContrastingColor(String(itemStyle.color))
+          : theme?.colorText,
       textBorderWidth: 0,
       formatter: (params: any) => {
         // don't show confidence band value labels, as they're already visible on the tooltip