From 101d0247a2d54e839232aac85be5e64f762f787c Mon Sep 17 00:00:00 2001
From: I748924 <ming.ann.tan@sap.com>
Date: Thu, 30 Apr 2026 16:43:05 +0800
Subject: [PATCH 1/2] feat(ColumnChart): add alignLabels property

---
 .../src/components/ColumnChart/index.tsx       | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx
index bbf0125336a..cc4d510633b 100644
--- a/packages/charts/src/components/ColumnChart/index.tsx
+++ b/packages/charts/src/components/ColumnChart/index.tsx
@@ -74,6 +74,21 @@ interface DimensionConfig extends IChartDimension {
 }
 
 export interface ColumnChartProps extends IChartBaseProps {
+  /**
+   * Alignment of the labels of the data points. Can be one of the following: `"center"`, `"insideTop"`, `"insideTopRight"`, `"insideRight"`, `"insideBottomRight"`, `"insideBottom"`, `"insideBottomLeft"`, `"insideLeft"`, `"insideTopLeft"`
+   *
+   * @default 'center'
+   */
+  alignLabels:
+    | 'center'
+    | 'insideTop'
+    | 'insideTopRight'
+    | 'insideRight'
+    | 'insideBottomRight'
+    | 'insideBottom'
+    | 'insideBottomLeft'
+    | 'insideLeft'
+    | 'insideTopLeft';
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
@@ -148,6 +163,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     ChartPlaceholder,
     syncId,
     children,
+    alignLabels = 'center',
     ...rest
   } = props;
 
@@ -339,7 +355,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
                 <LabelList
                   data={dataset}
                   valueAccessor={valueAccessor(element.accessor)}
-                  content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
+                  content={<ChartDataLabel config={element} chartType="column" position={alignLabels} />}
                 />
                 {chartConfig.showStackAggregateTotals &&
                   element.stackId &&

From f0d0edc81896a94e66212471985f5f90a282cb5b Mon Sep 17 00:00:00 2001
From: I748924 <ming.ann.tan@sap.com>
Date: Thu, 30 Apr 2026 17:11:18 +0800
Subject: [PATCH 2/2] refactor(ChartDataLabel): add LabelPosition type to
 ChartDataLabel

---
 packages/charts/src/internal/ChartDataLabel.tsx | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx
index 337fbf8489f..0fd87d39497 100644
--- a/packages/charts/src/internal/ChartDataLabel.tsx
+++ b/packages/charts/src/internal/ChartDataLabel.tsx
@@ -1,6 +1,7 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
 import { createElement } from 'react';
 import { Label } from 'recharts';
+import type { LabelPosition } from 'recharts/types/component/Label.js';
 import type { IChartMeasure } from '../interfaces/IChartMeasure.js';
 import { getTextWidth } from '../internal/Utils.js';
 
@@ -8,7 +9,7 @@ interface CustomDataLabelProps {
   config: IChartMeasure;
   viewBox?: any;
   chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie' | 'area';
-  position?: string;
+  position?: LabelPosition;
   value?: any;
   children?: any;
   isBigDataSet?: boolean;
@@ -41,14 +42,5 @@ export const ChartDataLabel = (props: CustomDataLabelProps) => {
     fill = ThemingParameters.sapTextColor; // label is displayed outside of the colored element
   }
 
-  return (
-    <Label
-      viewBox={viewBox}
-      {...(props as any)}
-      fill={fill}
-      stroke={'none'}
-      content={undefined}
-      value={formattedLabel}
-    />
-  );
+  return <Label viewBox={viewBox} {...props} fill={fill} stroke={'none'} content={undefined} value={formattedLabel} />;
 };