From 52341aeb9d70f37d5b1e5cc5b6e020726b946f7e Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 28 Jan 2026 14:17:58 +0100
Subject: [PATCH 1/2] feat(Line- & BulletChart): allow showing data labels for
 large datasets

---
 packages/charts/src/components/BulletChart/index.tsx     | 7 ++++++-
 packages/charts/src/components/ComposedChart/index.tsx   | 9 +++++++--
 .../src/components/LineChart/LineChart.stories.tsx       | 1 +
 packages/charts/src/components/LineChart/index.tsx       | 2 +-
 packages/charts/src/internal/ChartDataLabel.tsx          | 7 +++++--
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/charts/src/components/BulletChart/index.tsx b/packages/charts/src/components/BulletChart/index.tsx
index 81236657fd9..ed61a6f81e0 100644
--- a/packages/charts/src/components/BulletChart/index.tsx
+++ b/packages/charts/src/components/BulletChart/index.tsx
@@ -479,7 +479,12 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
               key={element.reactKey}
               name={element.label ?? element.accessor}
               label={
-                isBigDataSet ? null : <ChartDataLabel config={element} chartType={'bar'} position={labelPosition} />
+                <ChartDataLabel
+                  config={element}
+                  chartType={'bar'}
+                  position={labelPosition}
+                  isBigDataSet={isBigDataSet}
+                />
               }
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index d4ff2dbd328..34c4576cd72 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -492,8 +492,13 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               key={element.reactKey}
               name={element.label ?? element.accessor}
               label={
-                element.type === 'bar' || isBigDataSet ? undefined : (
-                  <ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
+                element.type === 'bar' ? undefined : (
+                  <ChartDataLabel
+                    config={element}
+                    chartType={element.type}
+                    position={labelPosition}
+                    isBigDataSet={isBigDataSet}
+                  />
                 )
               }
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx
index 91981c636c0..db5e395c66b 100644
--- a/packages/charts/src/components/LineChart/LineChart.stories.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.stories.tsx
@@ -155,6 +155,7 @@ export const WithLinearGradient: Story = {
         accessor: 'users',
         width: 2,
         color: 'url(#colorUsers)',
+        hideDataLabel: false,
       },
     ],
   },
diff --git a/packages/charts/src/components/LineChart/index.tsx b/packages/charts/src/components/LineChart/index.tsx
index 5a97a3db7d5..eb58d1c647f 100644
--- a/packages/charts/src/components/LineChart/index.tsx
+++ b/packages/charts/src/components/LineChart/index.tsx
@@ -305,7 +305,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
               key={element.reactKey}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
+              label={<ChartDataLabel config={element} chartType="line" position="top" isBigDataSet={isBigDataSet} />}
               type="monotone"
               dataKey={element.accessor}
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx
index 757062bf830..82bd12373f7 100644
--- a/packages/charts/src/internal/ChartDataLabel.tsx
+++ b/packages/charts/src/internal/ChartDataLabel.tsx
@@ -11,11 +11,14 @@ interface CustomDataLabelProps {
   position?: string;
   value?: any;
   children?: any;
+  isBigDataSet?: boolean;
 }
 
 export const ChartDataLabel = (props: CustomDataLabelProps) => {
-  const { config, chartType, viewBox } = props;
-  if (config.hideDataLabel) {
+  const { config, chartType, viewBox, isBigDataSet } = props;
+  const hideLabel = config.hideDataLabel !== false && (isBigDataSet || config.hideDataLabel || props.value == null);
+
+  if (hideLabel) {
     return null;
   }
 

From ed8654c7f1cc07bc6ec746fbf24bdf47138d60a8 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 28 Jan 2026 14:18:34 +0100
Subject: [PATCH 2/2] Update LineChart.stories.tsx

---
 packages/charts/src/components/LineChart/LineChart.stories.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/charts/src/components/LineChart/LineChart.stories.tsx b/packages/charts/src/components/LineChart/LineChart.stories.tsx
index db5e395c66b..91981c636c0 100644
--- a/packages/charts/src/components/LineChart/LineChart.stories.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.stories.tsx
@@ -155,7 +155,6 @@ export const WithLinearGradient: Story = {
         accessor: 'users',
         width: 2,
         color: 'url(#colorUsers)',
-        hideDataLabel: false,
       },
     ],
   },