feat(Line- & BulletChart): allow showing data labels for large datasets (#8150)

Closes #8148

Per default for `LineChart` and `BulletChart` (and the respective
implementation in the `ComposedChart`) with many data points, the labels
for the points are hidden. Setting `hideDataLabel: false` will now allow
showing them again.

Author: Lukas742

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})`}

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})`}

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})`}

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;
   }