feat(ColumnChart): add alignLabels property

packages/charts/src/components/BarChart/index.tsx

@@ -18,7 +18,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import type { YAxisProps } from 'recharts';
+import type { LabelProps, YAxisProps } from 'recharts';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
@@ -91,6 +91,12 @@ interface DimensionConfig extends IChartDimension {
 }
 
 export interface BarChartProps extends IChartBaseProps {
+  /**
+   * Alignment of the labels of the data points.
+   *
+   * @default 'insideRight'
+   */
+  alignLabels?: LabelProps['position'];
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
@@ -150,6 +156,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     syncId,
     ChartPlaceholder,
     children,
+    alignLabels = 'insideRight',
     ...rest
   } = props;
 
@@ -344,7 +351,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
                 <LabelList
                   data={dataset}
                   valueAccessor={valueAccessor(element.accessor)}
-                  content={<ChartDataLabel config={element} chartType="bar" position={'insideRight'} />}
+                  content={<ChartDataLabel config={element} chartType="bar" position={alignLabels} />}
                 />
                 {chartConfig.showStackAggregateTotals &&
                   element.stackId &&

packages/charts/src/components/BulletChart/index.tsx

@@ -17,7 +17,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import type { YAxisProps } from 'recharts';
+import type { LabelProps, YAxisProps } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
 import { useLegendItemClick } from '../../hooks/useLegendItemClick.js';
@@ -441,7 +441,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
           const chartElementProps: any = {
             isAnimationActive: !noAnimation,
           };
-          let labelPosition = 'top';
+          let labelPosition: LabelProps['position'] = 'top';
           switch (element.type) {
             case 'primary':
             case 'additional':

packages/charts/src/components/ColumnChart/index.tsx

@@ -18,7 +18,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import type { YAxisProps } from 'recharts';
+import type { LabelProps, YAxisProps } from 'recharts';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
@@ -74,6 +74,12 @@ interface DimensionConfig extends IChartDimension {
 }
 
 export interface ColumnChartProps extends IChartBaseProps {
+  /**
+   * Alignment of the labels of the data points.
+   *
+   * @default 'insideTop'
+   */
+  alignLabels?: LabelProps['position'];
   /**
    * An array of config objects. Each object will define one dimension of the chart.
    *
@@ -148,6 +154,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     ChartPlaceholder,
     syncId,
     children,
+    alignLabels = 'insideTop',
     ...rest
   } = props;
 
@@ -339,7 +346,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 &&

packages/charts/src/components/ComposedChart/index.tsx

@@ -20,7 +20,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import type { YAxisProps } from 'recharts';
+import type { LabelProps, YAxisProps } from 'recharts';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -462,7 +462,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
           const chartElementProps: any = {
             isAnimationActive: !noAnimation,
           };
-          let labelPosition = 'top';
+          let labelPosition: LabelProps['position'] = 'top';
 
           switch (element.type) {
             case 'line':

packages/charts/src/internal/ChartDataLabel.tsx

@@ -1,21 +1,22 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/ThemingParameters';
 import { createElement } from 'react';
 import { Label } from 'recharts';
+import type { LabelProps } from 'recharts';
 import type { IChartMeasure } from '../interfaces/IChartMeasure.js';
 import { getTextWidth } from '../internal/Utils.js';
 
 interface CustomDataLabelProps {
   config: IChartMeasure;
   viewBox?: any;
   chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie' | 'area';
-  position?: string;
+  position?: LabelProps['position'];
   value?: any;
   children?: any;
   isBigDataSet?: boolean;
 }
 
 export const ChartDataLabel = (props: CustomDataLabelProps) => {
-  const { config, chartType, viewBox, isBigDataSet } = props;
+  const { config, chartType, viewBox, isBigDataSet, ...labelProps } = props;
   const hideLabel = config.hideDataLabel !== false && (isBigDataSet || config.hideDataLabel || props.value == null);
 
   if (hideLabel) {
@@ -42,13 +43,6 @@ export const ChartDataLabel = (props: CustomDataLabelProps) => {
   }
 
   return (
-    <Label
-      viewBox={viewBox}
-      {...(props as any)}
-      fill={fill}
-      stroke={'none'}
-      content={undefined}
-      value={formattedLabel}
-    />
+    <Label viewBox={viewBox} {...labelProps} fill={fill} stroke={'none'} content={undefined} value={formattedLabel} />
   );
 };