From e8b795e03c7f8011bc8f5b05db5bdcaa9c355da6 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 23 Apr 2020 10:03:57 +0200
Subject: [PATCH 01/30] remove unused chart margin from radar chart

---
 .../src/components/RadarChart/RadarChart.tsx    | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 768b10e2bd2..8d5cf5b4278 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -1,6 +1,6 @@
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { PieChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/PieChartPlaceholder';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
@@ -14,13 +14,12 @@ import {
   RadarChart as RadarChartLib,
   Tooltip
 } from 'recharts';
-import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { useDataLabel } from '../../hooks/useLabelElements';
-import { useChartMargin } from '../../hooks/useChartMargin';
-import { IChartMeasure } from '../../interfaces/IChartMeasure';
-import { IChartDimension } from '../../interfaces/IChartDimension';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
+import { IChartDimension } from '../../interfaces/IChartDimension';
+import { IChartMeasure } from '../../interfaces/IChartMeasure';
+import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -121,8 +120,6 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
     [onDataPointClick]
   );
 
-  const marginChart = useChartMargin(dataset, (d) => d, primaryDimensionAccessor, chartConfig.margin, true, true, true);
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -134,7 +131,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
       tooltip={tooltip}
       slot={slot}
     >
-      <RadarChartLib data={dataset} margin={{ left: marginChart.left + 100 }}>
+      <RadarChartLib data={dataset} margin={chartConfig.margin}>
         <PolarGrid gridType={chartConfig.polarGridType} />
         <PolarAngleAxis
           dataKey={primaryDimensionAccessor}
@@ -167,9 +164,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
           );
         })}
         <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
-        {!noLegend && (
-          <Legend wrapperStyle={{ left: 100 }} verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />
-        )}
+        {!noLegend && <Legend verticalAlign={chartConfig.legendPosition} onClick={onItemLegendClick} />}
       </RadarChartLib>
     </ChartContainer>
   );

From 20bea21796b902148ccf02e8b677263422750422 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 23 Apr 2020 10:04:14 +0200
Subject: [PATCH 02/30] fix useChartMargin for complex accessors

---
 packages/charts/src/hooks/useChartMargin.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/charts/src/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
index 5df69b6b21a..7190d903822 100644
--- a/packages/charts/src/hooks/useChartMargin.ts
+++ b/packages/charts/src/hooks/useChartMargin.ts
@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { getTextWidth } from '../util/Utils';
 
 export const useChartMargin = (dataset, formatter, labelKey, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
@@ -7,7 +8,7 @@ export const useChartMargin = (dataset, formatter, labelKey, margin, isBar?, has
     if (dataset && isBar && typeof margin?.left !== 'number') {
       marginLeft = Math.max(
         ...dataset
-          .map((data) => formatter(data[labelKey]).split(' '))
+          .map((data) => formatter(getValueByDataKey(data, labelKey, '')).split(' '))
           .flat()
           .map(getTextWidth)
       );

From db5abdd7c5ed808a8e0c88eded3d25eb4f46fc69 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 23 Apr 2020 12:59:29 +0200
Subject: [PATCH 03/30] Add color and font family to container

---
 packages/charts/src/internal/ChartContainer.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
index 5842e239c61..8be39cf9859 100644
--- a/packages/charts/src/internal/ChartContainer.tsx
+++ b/packages/charts/src/internal/ChartContainer.tsx
@@ -24,6 +24,8 @@ const ChartContainer: FC<ContainerProps> = forwardRef((props: ContainerProps, re
   const internalStyles: CSSProperties = useMemo(() => {
     return {
       fontSize: ThemingParameters.sapFontSmallSize,
+      color: ThemingParameters.sapTextColor,
+      fontFamily: ThemingParameters.sapFontFamily,
       width: '100%',
       height: '400px',
       position: 'relative',

From 9c2138d2b6279e34b9207579b01f8a15499007a6 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 23 Apr 2020 12:59:45 +0200
Subject: [PATCH 04/30] remove useMemo from useLabelElements

---
 packages/charts/src/hooks/useLabelElements.ts | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/packages/charts/src/hooks/useLabelElements.ts b/packages/charts/src/hooks/useLabelElements.ts
index 9bf84d78103..0aaa7a0ff36 100644
--- a/packages/charts/src/hooks/useLabelElements.ts
+++ b/packages/charts/src/hooks/useLabelElements.ts
@@ -8,33 +8,34 @@ import {
 } from '../internal/CustomElements';
 import { getTextWidth, renderAxisTicks } from '../util/Utils';
 
-export const useDataLabel = (showDataLabel, dataLabelCustomElement, dataLabelFormatter, stacked?, bar?, noSizeCheck?) =>
-  useMemo(() => {
-    if (showDataLabel ?? true) {
-      if (dataLabelCustomElement) {
-        return (props) => DataLabel(props, dataLabelFormatter, dataLabelCustomElement);
-      } else {
-        return {
-          position: bar ? (stacked ? 'insideRight' : 'right') : stacked ? 'inside' : 'top',
-          content: (props) => {
-            const formattedDataValue = dataLabelFormatter(props.value);
-            if (noSizeCheck) {
-              return formattedDataValue;
-            }
-            if (props.viewBox.width < getTextWidth(formattedDataValue)) {
-              return null;
-            }
-            if (props.viewBox.height < 12) {
-              return null;
-            }
-            return formattedDataValue;
-          },
-          fill: ThemingParameters.sapContent_LabelColor
-        };
-      }
-    }
+export const useDataLabel = (elementConfig, stacked?, bar?, noSizeCheck?) => {
+  const { hideDataLabel, DataLabel: DataLabelCustomComponent, formatter } = elementConfig;
+
+  if (hideDataLabel) {
     return false;
-  }, [stacked, bar, showDataLabel, dataLabelFormatter, dataLabelCustomElement]);
+  }
+
+  if (DataLabelCustomComponent) {
+    return (props) => DataLabel(props, formatter, DataLabelCustomComponent);
+  }
+  return {
+    position: bar ? (stacked ? 'insideRight' : 'right') : stacked ? 'inside' : 'top',
+    content: (props) => {
+      const formattedDataValue = formatter(props.value);
+      if (noSizeCheck) {
+        return formattedDataValue;
+      }
+      if (props.viewBox.width < getTextWidth(formattedDataValue)) {
+        return null;
+      }
+      if (props.viewBox.height < 12) {
+        return null;
+      }
+      return formattedDataValue;
+    },
+    fill: ThemingParameters.sapContent_LabelColor
+  };
+};
 
 export const usePieDataLabel = (dataLabel, dataLabelCustomElement, dataLabelFormatter) =>
   useMemo(() => {

From d69be7923e8a8e09357e3187121bc42417ac80f1 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Thu, 23 Apr 2020 13:00:10 +0200
Subject: [PATCH 05/30] refactor: useDataLabel

---
 .../charts/src/components/BarChart/BarChart.tsx     | 13 +++----------
 .../src/components/ColumnChart/ColumnChart.tsx      | 10 ++--------
 .../charts/src/components/ComposedChart/index.tsx   |  6 ++----
 .../charts/src/components/LineChart/LineChart.tsx   | 11 ++---------
 .../charts/src/components/RadarChart/RadarChart.tsx |  9 +--------
 5 files changed, 10 insertions(+), 39 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 011889f452b..7c79474e987 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -24,7 +24,7 @@ import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 
-const formatYAxisTicks = (tick) => {
+const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
   return splitTick.length > 3
     ? `${splitTick.slice(0, 3).join(' ')}...`
@@ -164,7 +164,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
+    primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
     true,
@@ -221,14 +221,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             );
           })}
         {measures.map((element, index) => {
-          const BarDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            false,
-            true,
-            false
-          );
+          const BarDataLabel = useDataLabel(element, !!element.stackId, true);
           return (
             <Bar
               stackId={element.stackId}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 2c81b05dd4d..8c475c12872 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -168,7 +168,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
+    primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
     false,
@@ -226,13 +226,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           />
         )}
         {measures.map((element, index) => {
-          const ColumnDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            !!element.stackId,
-            false
-          );
+          const ColumnDataLabel = useDataLabel(element, !!element.stackId, false);
           return (
             <Column
               yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index cd09277e58f..e4db6e3c787 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -205,7 +205,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
+    primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
     false,
@@ -267,9 +267,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {measures?.map((element, index) => {
           const ComposedDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
+            element,
             !!(element.type === 'bar' && element.stackId),
             false,
             element.type === 'line' || element.type === 'area'
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 42b72e254db..a9803f8c955 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -159,7 +159,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
+    primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
     false,
@@ -217,14 +217,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
           />
         )}
         {measures.map((element, index) => {
-          const LineDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            false,
-            false,
-            true
-          );
+          const LineDataLabel = useDataLabel(element, false, false, true);
           return (
             <Line
               dot={!isBigDataSet}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 8d5cf5b4278..a53f3f4330d 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -142,14 +142,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
         />
         <PolarRadiusAxis />
         {measures.map((element, index) => {
-          const RadarDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            false,
-            false,
-            true
-          );
+          const RadarDataLabel = useDataLabel(element, false, false, true);
           return (
             <Radar
               key={element.accessor}

From b8d89322e6108a91fd534eb5ac32665b64d7d29c Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 13:22:08 +0200
Subject: [PATCH 06/30] calculate marginLeft by measures

---
 .../src/components/BarChart/BarChart.tsx      |  1 +
 .../components/ColumnChart/ColumnChart.tsx    |  1 +
 .../src/components/ComposedChart/index.tsx    |  1 +
 .../src/components/LineChart/LineChart.tsx    |  1 +
 .../src/components/RadarChart/RadarChart.tsx  | 17 +++++---
 packages/charts/src/hooks/useChartMargin.ts   | 43 +++++++++++++++----
 6 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 7c79474e987..2e59884d8e2 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -164,6 +164,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const marginChart = useChartMargin(
     dataset,
+    measures,
     primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 8c475c12872..db4785269da 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -168,6 +168,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const marginChart = useChartMargin(
     dataset,
+    measures,
     primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index e4db6e3c787..cd9992d7e95 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -205,6 +205,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const marginChart = useChartMargin(
     dataset,
+    measures,
     primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index a9803f8c955..28f2420fb2f 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -159,6 +159,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
 
   const marginChart = useChartMargin(
     dataset,
+    measures,
     primaryDimension?.formatter ?? ((d) => d),
     primaryDimensionAccessor,
     chartConfig.margin,
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index a53f3f4330d..dcf443633bd 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -107,13 +107,16 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
     (payload, eventOrIndex) => {
       if (eventOrIndex.value && onDataPointClick) {
         onDataPointClick(
-          enrichEventWithDetails(event, {
-            value: eventOrIndex.value,
-            dataKey: eventOrIndex.dataKey,
-            name: eventOrIndex.payload.label,
-            xIndex: eventOrIndex.index,
-            payload: eventOrIndex.payload
-          })
+          enrichEventWithDetails(
+            {},
+            {
+              value: eventOrIndex.value,
+              dataKey: eventOrIndex.dataKey,
+              name: eventOrIndex.payload.label,
+              xIndex: eventOrIndex.index,
+              payload: eventOrIndex.payload
+            }
+          )
         );
       }
     },
diff --git a/packages/charts/src/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
index 7190d903822..a228e4150a4 100644
--- a/packages/charts/src/hooks/useChartMargin.ts
+++ b/packages/charts/src/hooks/useChartMargin.ts
@@ -2,22 +2,47 @@ import { useMemo } from 'react';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { getTextWidth } from '../util/Utils';
 
-export const useChartMargin = (dataset, formatter, labelKey, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
+export const useChartMargin = (
+  dataset,
+  measures,
+  formatter,
+  labelKey,
+  margin,
+  isBar?,
+  hasSecondaryDimension?,
+  hasZoomingTool?
+) =>
   useMemo(() => {
     let marginLeft = 0;
-    if (dataset && isBar && typeof margin?.left !== 'number') {
-      marginLeft = Math.max(
-        ...dataset
-          .map((data) => formatter(getValueByDataKey(data, labelKey, '')).split(' '))
-          .flat()
-          .map(getTextWidth)
-      );
+    if (dataset && typeof margin?.left !== 'number') {
+      if (isBar) {
+        marginLeft = Math.max(
+          ...dataset
+            .map((data) => formatter(getValueByDataKey(data, labelKey, '')).split(' '))
+            .flat()
+            .map(getTextWidth)
+        );
+      } else {
+        marginLeft = getTextWidth(
+          Math.max(
+            ...dataset.map((item) => {
+              return Math.max(...measures.map((measure) => item[measure.accessor]));
+            })
+          )
+        );
+      }
     }
     return {
       right: margin?.right ?? 60,
       top: margin?.top ?? hasZoomingTool ? 40 : 10,
       bottom: margin?.bottom ?? (!isBar && hasSecondaryDimension) ? 100 : 30,
       left:
-        margin?.left ?? isBar ? (hasSecondaryDimension ? marginLeft : marginLeft / 2) : hasSecondaryDimension ? 20 : 0
+        margin?.left ?? isBar
+          ? hasSecondaryDimension
+            ? marginLeft
+            : marginLeft / 2
+          : hasSecondaryDimension
+          ? marginLeft / 2
+          : marginLeft / 2
     };
   }, [dataset, labelKey, margin]);

From 8067c41fbba8362c71b4c57385e93f0f3f7ca614 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 27 Apr 2020 14:15:08 +0200
Subject: [PATCH 07/30] update to recharts-beta.5

---
 packages/charts/package.json                  |   2 +-
 .../src/components/BarChart/BarChart.tsx      |  13 +-
 .../components/ColumnChart/ColumnChart.tsx    |  13 +-
 .../ComposedChart/ComposedChart.stories.tsx   |   5 +-
 .../src/components/ComposedChart/index.tsx    |  29 +-
 .../src/components/LineChart/LineChart.tsx    |   5 +-
 .../src/components/PieChart/PieChart.tsx      |  14 +-
 .../src/components/RadarChart/RadarChart.tsx  |  11 +-
 packages/charts/src/hooks/useLabelElements.ts |  70 ---
 .../charts/src/hooks/useLabelElements.tsx     |  72 +++
 packages/charts/src/internal/ChartLabel.tsx   | 476 ++++++++++++++++++
 yarn.lock                                     |  50 +-
 12 files changed, 623 insertions(+), 137 deletions(-)
 delete mode 100644 packages/charts/src/hooks/useLabelElements.ts
 create mode 100644 packages/charts/src/hooks/useLabelElements.tsx
 create mode 100644 packages/charts/src/internal/ChartLabel.tsx

diff --git a/packages/charts/package.json b/packages/charts/package.json
index 6d734983a76..ebb0e005458 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -27,7 +27,7 @@
     "lodash.merge": "^4.6.2",
     "react-chartjs-2": "^2.8.0",
     "react-content-loader": "^5.0.4",
-    "recharts": "2.0.0-beta.1"
+    "recharts": "2.0.0-beta.5"
   },
   "devDependencies": {
     "@types/chart.js": "^2.9.8"
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 7c79474e987..42eff220fa4 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -17,7 +17,7 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
@@ -185,7 +185,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
       tooltip={tooltip}
       slot={slot}
     >
-      <BarChartLib margin={marginChart} layout={'vertical'} data={dataset} barGap={chartConfig.barGap}>
+      <BarChartLib margin={marginChart} layout="vertical" data={dataset} barGap={chartConfig.barGap}>
         <CartesianGrid
           vertical={chartConfig.gridVertical ?? false}
           horizontal={chartConfig.gridHorizontal}
@@ -221,7 +221,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
             );
           })}
         {measures.map((element, index) => {
-          const BarDataLabel = useDataLabel(element, !!element.stackId, true);
           return (
             <Bar
               stackId={element.stackId}
@@ -229,7 +228,13 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={BarDataLabel}
+              label={
+                <CustomDataLabel
+                  config={element}
+                  chartType="bar"
+                  position={element.stackId ? 'insideRight' : 'right'}
+                />
+              }
               type="monotone"
               dataKey={element.accessor}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 8c475c12872..18f8bea81e3 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -1,6 +1,6 @@
-import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
+import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
 import { ColumnChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/ColumnChartPlaceholder';
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
@@ -16,13 +16,13 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { useChartMargin } from '../../hooks/useChartMargin';
+import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
+import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { useDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
-import { useChartMargin } from '../../hooks/useChartMargin';
-import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -226,7 +226,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           />
         )}
         {measures.map((element, index) => {
-          const ColumnDataLabel = useDataLabel(element, !!element.stackId, false);
           return (
             <Column
               yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
@@ -235,7 +234,9 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={ColumnDataLabel}
+              label={
+                <CustomDataLabel config={element} chartType="column" position={element.stackId ? 'inside' : 'top'} />
+              }
               type="monotone"
               dataKey={element.accessor}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
index b52660823f4..a606eda975d 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { ComposedChart } from '@ui5/webcomponents-react-charts/lib/next/ComposedChart';
 import React from 'react';
 import { bigDataSet, complexDataSet, secondaryDimensionDataSet, simpleDataSet } from '../../resources/DemoProps';
-import { boolean } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
 
 export default {
   title: 'Charts - Unstable /  ComposedChart',
@@ -17,6 +17,7 @@ export const renderStory = () => {
       onLegendClick={action('onLegendClick')}
       dataset={complexDataSet}
       style={{ height: '60vh' }}
+      layout={select('layout', ['horizontal', 'vertical'], 'horizontal')}
       dimensions={[
         {
           accessor: 'name',
@@ -34,7 +35,7 @@ export const renderStory = () => {
           accessor: 'users',
           label: 'Users',
           formatter: (val) => val.toLocaleString(),
-          type: 'line'
+          type: 'area'
         },
         {
           accessor: 'volume',
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index e4db6e3c787..618f037aec9 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -18,7 +18,7 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
@@ -31,8 +31,7 @@ const dimensionDefaults = {
 
 const measureDefaults = {
   formatter: (d) => d,
-  opacity: 1,
-  width: 1
+  opacity: 1
 };
 
 interface MeasureConfig extends IChartMeasure {
@@ -83,6 +82,11 @@ export interface ComposedChartProps extends RechartBaseProps {
    *
    */
   measures: MeasureConfig[];
+  /**
+   * layout for showing measures. `horizontal` bars would equal the column chart, `vertical` would be a bar chart.
+   * Default Value: `horizontal`
+   */
+  // layout?: 'horizontal' | 'vertical';
 }
 
 enum ChartTypes {
@@ -106,6 +110,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     onDataPointClick,
     noLegend = false,
     onLegendClick,
+    layout = 'horizontal',
     chartConfig = {
       margin: {},
       yAxisVisible: false,
@@ -224,7 +229,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
       tooltip={tooltip}
       slot={slot}
     >
-      <ComposedChartLib margin={marginChart} data={dataset}>
+      <ComposedChartLib margin={marginChart} data={dataset} layout={layout}>
         <CartesianGrid
           vertical={chartConfig.gridVertical ?? false}
           horizontal={chartConfig.gridHorizontal}
@@ -266,38 +271,34 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {measures?.map((element, index) => {
-          const ComposedDataLabel = useDataLabel(
-            element,
-            !!(element.type === 'bar' && element.stackId),
-            false,
-            element.type === 'line' || element.type === 'area'
-          );
           const ChartElement = (ChartTypes[element.type] as any) as FC<any>;
 
           const chartElementProps: any = {};
+          let labelPosition = 'top';
 
           switch (element.type) {
             case 'line':
               chartElementProps.activeDot = {
                 onClick: onDataPointClickInternal
               };
-              chartElementProps.strokeWidth = element.width ?? 1;
+              chartElementProps.strokeWidth = element.width;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.dot = !isBigDataSet;
               break;
             case 'bar':
               chartElementProps.fillOpacity = element.opacity;
               chartElementProps.strokeOpacity = element.opacity;
-              chartElementProps.barSize = element.width === 1 ? 20 : element.width;
+              chartElementProps.barSize = element.width;
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
+              labelPosition = element.stackId ? 'insideRight' : 'right';
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
               chartElementProps.fillOpacity = 0.3;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.onClick = onDataPointClickInternal;
-              chartElementProps.strokeWidth = element.width ?? 1;
+              chartElementProps.strokeWidth = element.width;
               break;
           }
           return (
@@ -305,7 +306,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.accessor}
               name={element.label ?? element.accessor}
-              label={isBigDataSet ? false : ComposedDataLabel}
+              label={<CustomDataLabel config={element} chartType={element.type} position={labelPosition} />}
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               type="monotone"
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index a9803f8c955..110b4661190 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -17,7 +17,7 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
@@ -217,7 +217,6 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
           />
         )}
         {measures.map((element, index) => {
-          const LineDataLabel = useDataLabel(element, false, false, true);
           return (
             <Line
               dot={!isBigDataSet}
@@ -225,7 +224,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={isBigDataSet ? false : LineDataLabel}
+              label={isBigDataSet ? false : <CustomDataLabel config={element} chartType="line" position="top" />}
               type="monotone"
               dataKey={element.accessor}
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
index 1a9b80e8e1c..e300a895c4c 100644
--- a/packages/charts/src/components/PieChart/PieChart.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -3,9 +3,8 @@ import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils'
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { PieChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/PieChartPlaceholder';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
-import React, { FC, forwardRef, Ref, useCallback, useMemo, CSSProperties } from 'react';
+import React, { CSSProperties, FC, forwardRef, Ref, useCallback, useMemo } from 'react';
 import { Cell, Label, Legend, Pie, PieChart as PieChartLib, Tooltip } from 'recharts';
-import { usePieDataLabel } from '../../hooks/useLabelElements';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 
@@ -110,9 +109,14 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
     [onDataPointClick]
   );
 
-  const PieDataLabel = usePieDataLabel(!measure.hideDataLabel, measure.DataLabel, measure.formatter);
-
   const marginChart = chartConfig?.margin ?? { right: 30, left: 30, bottom: 30, top: 30 };
+  const label = useMemo(() => {
+    return {
+      position: 'outside',
+      content: measure.hideDataLabel ?? measure.DataLabel,
+      formatter: measure.formatter
+    };
+  }, [measure]);
 
   return (
     <ChartContainer
@@ -132,7 +136,7 @@ const PieChart: FC<PieChartProps> = forwardRef((props: PieChartProps, ref: Ref<a
           nameKey={dimension.accessor}
           dataKey={measure.accessor}
           data={dataset}
-          label={PieDataLabel}
+          label={label}
           onClick={onDataPointClickInternal}
         >
           {centerLabel && <Label position={'center'}>{centerLabel}</Label>}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index a53f3f4330d..3be24f27264 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -14,7 +14,7 @@ import {
   RadarChart as RadarChartLib,
   Tooltip
 } from 'recharts';
-import { useDataLabel } from '../../hooks/useLabelElements';
+import { CustomDataLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
@@ -142,7 +142,6 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
         />
         <PolarRadiusAxis />
         {measures.map((element, index) => {
-          const RadarDataLabel = useDataLabel(element, false, false, true);
           return (
             <Radar
               key={element.accessor}
@@ -152,7 +151,13 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fillOpacity={element.opacity}
-              label={RadarDataLabel}
+              label={
+                <CustomDataLabel
+                  config={element}
+                  chartType="radar"
+                  position={element.stackId ? 'insideRight' : 'right'}
+                />
+              }
             />
           );
         })}
diff --git a/packages/charts/src/hooks/useLabelElements.ts b/packages/charts/src/hooks/useLabelElements.ts
deleted file mode 100644
index 0aaa7a0ff36..00000000000
--- a/packages/charts/src/hooks/useLabelElements.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
-import { useCallback, useMemo } from 'react';
-import {
-  DataLabel,
-  SecondaryDimensionTicksXAxis,
-  SecondaryDimensionTicksYAxis,
-  YAxisTicks
-} from '../internal/CustomElements';
-import { getTextWidth, renderAxisTicks } from '../util/Utils';
-
-export const useDataLabel = (elementConfig, stacked?, bar?, noSizeCheck?) => {
-  const { hideDataLabel, DataLabel: DataLabelCustomComponent, formatter } = elementConfig;
-
-  if (hideDataLabel) {
-    return false;
-  }
-
-  if (DataLabelCustomComponent) {
-    return (props) => DataLabel(props, formatter, DataLabelCustomComponent);
-  }
-  return {
-    position: bar ? (stacked ? 'insideRight' : 'right') : stacked ? 'inside' : 'top',
-    content: (props) => {
-      const formattedDataValue = formatter(props.value);
-      if (noSizeCheck) {
-        return formattedDataValue;
-      }
-      if (props.viewBox.width < getTextWidth(formattedDataValue)) {
-        return null;
-      }
-      if (props.viewBox.height < 12) {
-        return null;
-      }
-      return formattedDataValue;
-    },
-    fill: ThemingParameters.sapContent_LabelColor
-  };
-};
-
-export const usePieDataLabel = (dataLabel, dataLabelCustomElement, dataLabelFormatter) =>
-  useMemo(() => {
-    return dataLabel || typeof dataLabel === 'undefined'
-      ? dataLabelCustomElement
-        ? (props) => DataLabel(props, dataLabelFormatter, dataLabelCustomElement)
-        : (props): number | string => dataLabelFormatter(props.value)
-      : false;
-  }, [dataLabelFormatter, dataLabelCustomElement, dataLabel]);
-
-export const useAxisLabel = (AxisFormatter, yAxis?) => {
-  return useCallback(
-    (labelProps) => {
-      return yAxis ? YAxisTicks(labelProps, AxisFormatter) : renderAxisTicks(labelProps, AxisFormatter);
-    },
-    [AxisFormatter]
-  );
-};
-
-let dimension = '';
-export const useSecondaryDimensionLabel = (yAxis?: boolean, yAxisFormatter?) => {
-  return useCallback((labelProps) => {
-    if (dimension === labelProps.payload.value) {
-      return undefined;
-    } else {
-      dimension = labelProps.payload.value;
-      return yAxis
-        ? SecondaryDimensionTicksYAxis(labelProps, yAxisFormatter)
-        : SecondaryDimensionTicksXAxis(labelProps);
-    }
-  }, []);
-};
diff --git a/packages/charts/src/hooks/useLabelElements.tsx b/packages/charts/src/hooks/useLabelElements.tsx
new file mode 100644
index 00000000000..4323a4d47ca
--- /dev/null
+++ b/packages/charts/src/hooks/useLabelElements.tsx
@@ -0,0 +1,72 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import React, { FC, useCallback } from 'react';
+import { IChartMeasure } from '../interfaces/IChartMeasure';
+import Label from '../internal/ChartLabel';
+import { SecondaryDimensionTicksXAxis, SecondaryDimensionTicksYAxis, YAxisTicks } from '../internal/CustomElements';
+import { getTextWidth, renderAxisTicks } from '../util/Utils';
+
+interface CustomDataLabelProps {
+  config: IChartMeasure;
+  viewBox?: any;
+  chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie';
+  position?: string;
+  value?: any;
+  children?: any;
+}
+
+export const CustomDataLabel: FC<CustomDataLabelProps> = (props: CustomDataLabelProps) => {
+  const { config, chartType } = props;
+
+  const viewBox = Label.parseViewBox(props);
+
+  if (config.hideDataLabel) {
+    return null;
+  }
+
+  if (config.DataLabel) {
+    return config.DataLabel(props);
+  }
+
+  const formattedLabel = config.formatter(props.value ?? props.children);
+  if (chartType === 'bar' || chartType === 'column') {
+    if (viewBox.width < getTextWidth(formattedLabel)) {
+      return null;
+    }
+    if (viewBox.height < 12) {
+      return null;
+    }
+  }
+
+  return (
+    <Label
+      fill={ThemingParameters.sapContent_LabelColor}
+      viewBox={viewBox}
+      {...(props as any)}
+      content={undefined}
+      value={formattedLabel}
+    />
+  );
+};
+
+export const useAxisLabel = (AxisFormatter, yAxis?) => {
+  return useCallback(
+    (labelProps) => {
+      return yAxis ? YAxisTicks(labelProps, AxisFormatter) : renderAxisTicks(labelProps, AxisFormatter);
+    },
+    [AxisFormatter]
+  );
+};
+
+let dimension = '';
+export const useSecondaryDimensionLabel = (yAxis?: boolean, yAxisFormatter?) => {
+  return useCallback((labelProps) => {
+    if (dimension === labelProps.payload.value) {
+      return undefined;
+    } else {
+      dimension = labelProps.payload.value;
+      return yAxis
+        ? SecondaryDimensionTicksYAxis(labelProps, yAxisFormatter)
+        : SecondaryDimensionTicksXAxis(labelProps);
+    }
+  }, []);
+};
diff --git a/packages/charts/src/internal/ChartLabel.tsx b/packages/charts/src/internal/ChartLabel.tsx
new file mode 100644
index 00000000000..76953f321bc
--- /dev/null
+++ b/packages/charts/src/internal/ChartLabel.tsx
@@ -0,0 +1,476 @@
+import React, { cloneElement, isValidElement, ReactNode, ReactElement, createElement } from 'react';
+import _ from 'lodash';
+import classNames from 'classnames';
+import { Text } from 'recharts';
+import { findAllByType } from 'recharts/es6/util/ReactUtils';
+import { isNumOrStr, isNumber, isPercent, getPercentValue, uniqueId, mathSign } from 'recharts/es6/util/DataUtils';
+import { polarToCartesian } from 'recharts/es6/util/PolarUtils';
+import { PresentationAttributes, filterProps } from 'recharts/es6/util/types';
+
+interface CartesianViewBox {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+}
+
+interface PolarViewBox {
+  cx?: number;
+  cy?: number;
+  innerRadius?: number;
+  outerRadius?: number;
+  startAngle?: number;
+  endAngle?: number;
+  clockWise?: boolean;
+}
+
+type ViewBox = CartesianViewBox | PolarViewBox;
+export type ContentType = ReactElement | ((props: Props) => ReactNode);
+
+interface LabelProps {
+  viewBox?: ViewBox;
+  formatter?: Function;
+  value?: number | string;
+  offset?: number;
+  position?:
+    | 'top'
+    | 'left'
+    | 'right'
+    | 'bottom'
+    | 'inside'
+    | 'outside'
+    | 'insideLeft'
+    | 'insideRight'
+    | 'insideTop'
+    | 'insideBottom'
+    | 'insideTopLeft'
+    | 'insideBottomLeft'
+    | 'insideTopRight'
+    | 'insideBottomRight'
+    | 'insideStart'
+    | 'insideEnd'
+    | 'end'
+    | 'center'
+    | 'centerTop'
+    | 'centerBottom'
+    | {
+        x?: number;
+        y?: number;
+      };
+  children?: ReactNode;
+  className?: string;
+  content?: ContentType;
+}
+
+type Props = Omit<PresentationAttributes<SVGTextElement>, 'viewBox'> & LabelProps;
+
+const getLabel = (props: Props) => {
+  const { value, formatter } = props;
+  const label = value ?? props.children;
+
+  if (typeof formatter === 'function') {
+    return formatter(label);
+  }
+
+  return label;
+};
+
+const getDeltaAngle = (startAngle: number, endAngle: number) => {
+  const sign = mathSign(endAngle - startAngle);
+  const deltaAngle = Math.min(Math.abs(endAngle - startAngle), 360);
+
+  return sign * deltaAngle;
+};
+
+const renderRadialLabel = (labelProps: Props, label: ReactNode, attrs: PresentationAttributes<SVGTextElement>) => {
+  const { position, viewBox, offset, className } = labelProps;
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, clockWise } = viewBox as PolarViewBox;
+  const radius = (innerRadius + outerRadius) / 2;
+  const deltaAngle = getDeltaAngle(startAngle, endAngle);
+  const sign = deltaAngle >= 0 ? 1 : -1;
+  let labelAngle, direction;
+
+  if (position === 'insideStart') {
+    labelAngle = startAngle + sign * offset;
+    direction = clockWise;
+  } else if (position === 'insideEnd') {
+    labelAngle = endAngle - sign * offset;
+    direction = !clockWise;
+  } else if (position === 'end') {
+    labelAngle = endAngle + sign * offset;
+    direction = clockWise;
+  }
+
+  direction = deltaAngle <= 0 ? direction : !direction;
+
+  const startPoint = polarToCartesian(cx, cy, radius, labelAngle);
+  const endPoint = polarToCartesian(cx, cy, radius, labelAngle + (direction ? 1 : -1) * 359);
+  const path = `M${startPoint.x},${startPoint.y}
+    A${radius},${radius},0,1,${direction ? 0 : 1},
+    ${endPoint.x},${endPoint.y}`;
+  const id = _.isNil(labelProps.id) ? uniqueId('recharts-radial-line-') : labelProps.id;
+
+  return (
+    <text {...attrs} dominantBaseline="central" className={classNames('recharts-radial-bar-label', className)}>
+      <defs>
+        <path id={id} d={path} />
+      </defs>
+      <textPath xlinkHref={`#${id}`}>{label}</textPath>
+    </text>
+  );
+};
+
+const getAttrsOfPolarLabel = (props: Props) => {
+  const { viewBox, offset, position } = props;
+  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle } = viewBox as PolarViewBox;
+  const midAngle = (startAngle + endAngle) / 2;
+
+  if (position === 'outside') {
+    const { x, y } = polarToCartesian(cx, cy, outerRadius + offset, midAngle);
+
+    return {
+      x,
+      y,
+      textAnchor: x >= cx ? 'start' : 'end',
+      verticalAnchor: 'middle'
+    };
+  }
+
+  if (position === 'center') {
+    return {
+      x: cx,
+      y: cy,
+      textAnchor: 'middle',
+      verticalAnchor: 'middle'
+    };
+  }
+
+  if (position === 'centerTop') {
+    return {
+      x: cx,
+      y: cy,
+      textAnchor: 'middle',
+      verticalAnchor: 'start'
+    };
+  }
+
+  if (position === 'centerBottom') {
+    return {
+      x: cx,
+      y: cy,
+      textAnchor: 'middle',
+      verticalAnchor: 'end'
+    };
+  }
+
+  const r = (innerRadius + outerRadius) / 2;
+  const { x, y } = polarToCartesian(cx, cy, r, midAngle);
+
+  return {
+    x,
+    y,
+    textAnchor: 'middle',
+    verticalAnchor: 'middle'
+  };
+};
+
+const getAttrsOfCartesianLabel = (props: Props) => {
+  const { viewBox, offset, position } = props;
+  const { x, y, width, height } = viewBox as CartesianViewBox;
+
+  // Define vertical offsets and position inverts based on the value being positive or negative
+  const verticalSign = height >= 0 ? 1 : -1;
+  const verticalOffset = verticalSign * offset;
+  const verticalEnd = verticalSign > 0 ? 'end' : 'start';
+  const verticalStart = verticalSign > 0 ? 'start' : 'end';
+
+  // Define horizontal offsets and position inverts based on the value being positive or negative
+  const horizontalSign = width >= 0 ? 1 : -1;
+  const horizontalOffset = horizontalSign * offset;
+  const horizontalEnd = horizontalSign > 0 ? 'end' : 'start';
+  const horizontalStart = horizontalSign > 0 ? 'start' : 'end';
+
+  if (position === 'top') {
+    return {
+      x: x + width / 2,
+      y: y - verticalSign * offset,
+      textAnchor: 'middle',
+      verticalAnchor: verticalEnd
+    };
+  }
+
+  if (position === 'bottom') {
+    return {
+      x: x + width / 2,
+      y: y + height + verticalOffset,
+      textAnchor: 'middle',
+      verticalAnchor: verticalStart
+    };
+  }
+
+  if (position === 'left') {
+    return {
+      x: x - horizontalOffset,
+      y: y + height / 2,
+      textAnchor: horizontalEnd,
+      verticalAnchor: 'middle'
+    };
+  }
+
+  if (position === 'right') {
+    return {
+      x: x + width + horizontalOffset,
+      y: y + height / 2,
+      textAnchor: horizontalStart,
+      verticalAnchor: 'middle'
+    };
+  }
+
+  if (position === 'insideLeft') {
+    return {
+      x: x + horizontalOffset,
+      y: y + height / 2,
+      textAnchor: horizontalStart,
+      verticalAnchor: 'middle'
+    };
+  }
+
+  if (position === 'insideRight') {
+    return {
+      x: x + width - horizontalOffset,
+      y: y + height / 2,
+      textAnchor: horizontalEnd,
+      verticalAnchor: 'middle'
+    };
+  }
+
+  if (position === 'insideTop') {
+    return {
+      x: x + width / 2,
+      y: y + verticalOffset,
+      textAnchor: 'middle',
+      verticalAnchor: verticalStart
+    };
+  }
+
+  if (position === 'insideBottom') {
+    return {
+      x: x + width / 2,
+      y: y + height - verticalOffset,
+      textAnchor: 'middle',
+      verticalAnchor: verticalEnd
+    };
+  }
+
+  if (position === 'insideTopLeft') {
+    return {
+      x: x + horizontalOffset,
+      y: y + verticalOffset,
+      textAnchor: horizontalStart,
+      verticalAnchor: verticalStart
+    };
+  }
+
+  if (position === 'insideTopRight') {
+    return {
+      x: x + width - horizontalOffset,
+      y: y + verticalOffset,
+      textAnchor: horizontalEnd,
+      verticalAnchor: verticalStart
+    };
+  }
+
+  if (position === 'insideBottomLeft') {
+    return {
+      x: x + horizontalOffset,
+      y: y + height - verticalOffset,
+      textAnchor: horizontalStart,
+      verticalAnchor: verticalEnd
+    };
+  }
+
+  if (position === 'insideBottomRight') {
+    return {
+      x: x + width - horizontalOffset,
+      y: y + height - verticalOffset,
+      textAnchor: horizontalEnd,
+      verticalAnchor: verticalEnd
+    };
+  }
+
+  if (
+    _.isObject(position) &&
+    (isNumber(position.x) || isPercent(position.x)) &&
+    (isNumber(position.y) || isPercent(position.y))
+  ) {
+    return {
+      x: x + getPercentValue(position.x, width),
+      y: y + getPercentValue(position.y, height),
+      textAnchor: 'end',
+      verticalAnchor: 'end'
+    };
+  }
+
+  return {
+    x: x + width / 2,
+    y: y + height / 2,
+    textAnchor: 'middle',
+    verticalAnchor: 'middle'
+  };
+};
+
+const isPolar = (viewBox: CartesianViewBox | PolarViewBox) => isNumber((viewBox as PolarViewBox).cx);
+
+function Label(props: Props) {
+  const { viewBox, position, value, children, content, className = '' } = props;
+
+  if (!viewBox || (_.isNil(value) && _.isNil(children) && !isValidElement(content) && !_.isFunction(content))) {
+    return null;
+  }
+
+  if (isValidElement(content)) {
+    return cloneElement(content, props);
+  }
+
+  let label: ReactNode;
+  if (_.isFunction(content)) {
+    label = createElement(content as any, props);
+
+    if (isValidElement(label)) {
+      return label;
+    }
+  } else {
+    label = getLabel(props);
+  }
+
+  const isPolarLabel = isPolar(viewBox);
+  const attrs = filterProps(props, true);
+
+  if (isPolarLabel && (position === 'insideStart' || position === 'insideEnd' || position === 'end')) {
+    return renderRadialLabel(props, label, attrs);
+  }
+
+  const positionAttrs = isPolarLabel ? getAttrsOfPolarLabel(props) : getAttrsOfCartesianLabel(props);
+
+  return (
+    <Text className={classNames('recharts-label', className)} {...attrs} {...(positionAttrs as any)}>
+      {label}
+    </Text>
+  );
+}
+
+Label.displayName = 'Label';
+Label.defaultProps = {
+  offset: 5
+};
+
+const parseViewBox = (props: any) => {
+  const {
+    cx,
+    cy,
+    angle,
+    startAngle,
+    endAngle,
+    r,
+    radius,
+    innerRadius,
+    outerRadius,
+    x,
+    y,
+    top,
+    left,
+    width,
+    height,
+    clockWise
+  } = props;
+
+  if (isNumber(width) && isNumber(height)) {
+    if (isNumber(x) && isNumber(y)) {
+      return { x, y, width, height };
+    }
+    if (isNumber(top) && isNumber(left)) {
+      return { x: top, y: left, width, height };
+    }
+  }
+
+  if (isNumber(x) && isNumber(y)) {
+    return { x, y, width: 0, height: 0 };
+  }
+
+  if (isNumber(cx) && isNumber(cy)) {
+    return {
+      cx,
+      cy,
+      startAngle: startAngle || angle || 0,
+      endAngle: endAngle || angle || 0,
+      innerRadius: innerRadius || 0,
+      outerRadius: outerRadius || radius || r || 0,
+      clockWise
+    };
+  }
+
+  if (props.viewBox) {
+    return props.viewBox;
+  }
+
+  return {};
+};
+
+const parseLabel = (label: any, viewBox: ViewBox) => {
+  if (!label) {
+    return null;
+  }
+
+  if (label === true) {
+    return <Label key="label-implicit" viewBox={viewBox} />;
+  }
+
+  if (isNumOrStr(label)) {
+    return <Label key="label-implicit" viewBox={viewBox} value={label} />;
+  }
+
+  if (isValidElement(label)) {
+    if (label.type === Label) {
+      return cloneElement(label as any, { key: 'label-implicit', viewBox });
+    }
+
+    return <Label key="label-implicit" content={label} viewBox={viewBox} />;
+  }
+
+  if (_.isFunction(label)) {
+    return <Label key="label-implicit" content={label} viewBox={viewBox} />;
+  }
+
+  if (_.isObject(label)) {
+    return <Label viewBox={viewBox} {...label} key="label-implicit" />;
+  }
+
+  return null;
+};
+
+const renderCallByParent = (parentProps: any, viewBox?: ViewBox, ckeckPropsLabel = true) => {
+  if (!parentProps || (!parentProps.children && ckeckPropsLabel && !parentProps.label)) {
+    return null;
+  }
+  const { children } = parentProps;
+  const parentViewBox = parseViewBox(parentProps);
+
+  const explicitChilren = findAllByType(children, Label.displayName).map((child: any, index: number) =>
+    cloneElement(child, {
+      viewBox: viewBox || parentViewBox,
+      key: `label-${index}`
+    })
+  );
+
+  if (!ckeckPropsLabel) {
+    return explicitChilren;
+  }
+  const implicitLabel = parseLabel(parentProps.label, viewBox || parentViewBox);
+
+  return [implicitLabel, ...explicitChilren];
+};
+
+Label.parseViewBox = parseViewBox;
+Label.renderCallByParent = renderCallByParent;
+
+export default Label;
diff --git a/yarn.lock b/yarn.lock
index 25158fb9af6..043f4c4c472 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4992,11 +4992,6 @@ bail@^1.0.0:
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
   integrity sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==
 
-balanced-match@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
-  integrity sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -6482,6 +6477,11 @@ css-tree@1.0.0-alpha.37:
     mdn-data "2.0.4"
     source-map "^0.6.1"
 
+css-unit-converter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
+  integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
+
 css-vars-ponyfill@^2.1.2:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/css-vars-ponyfill/-/css-vars-ponyfill-2.2.1.tgz#c97dcfb3efc93b479661af58afa04cb0ef5b97e6"
@@ -11876,11 +11876,6 @@ material-colors@^1.2.1:
   resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
   integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
 
-math-expression-evaluator@^1.2.14:
-  version "1.2.22"
-  resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.22.tgz#c14dcb3d8b4d150e5dcea9c68c8dad80309b0d5e"
-  integrity sha512-L0j0tFVZBQQLeEjmWOvDLoRciIY8gQGWahvkztXUal8jH8R5Rlqo9GCvgqvXcy9LQhEWdQCVvzqAbxgYNt4blQ==
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -13659,6 +13654,11 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-value-parser@^3.3.0:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
+  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
+
 postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.3.tgz#651ff4593aa9eda8d5d0d66593a2417aeaeb325d"
@@ -14764,10 +14764,10 @@ recharts-scale@^0.4.2:
   dependencies:
     decimal.js-light "^2.4.1"
 
-recharts@2.0.0-beta.1:
-  version "2.0.0-beta.1"
-  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.0.0-beta.1.tgz#dc0aa89b94233941c5af86b43db585312c45140d"
-  integrity sha512-awJH2DE6JRgp5ymzmH5dKh2Pu6prqZJCr3NRaYCcyub1fBa+fIG3ZlpLyl9hWizHPGEvfZLvcjIM+qgTsr9aSQ==
+recharts@2.0.0-beta.5:
+  version "2.0.0-beta.5"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.0.0-beta.5.tgz#b2b05563da9cef675b162cc50af0e18bbb4b797d"
+  integrity sha512-2Tiy2jPxpfR7vm2ahq5BJD1gqGN78k5iGPaSUZKfXI595zb/pZIVgOAN1zKAnekepoHkxzyZtbzINHsnW3yv2Q==
   dependencies:
     classnames "^2.2.5"
     core-js "^3.4.2"
@@ -14779,7 +14779,7 @@ recharts@2.0.0-beta.1:
     react-resize-detector "^4.2.1"
     react-smooth "^1.0.5"
     recharts-scale "^0.4.2"
-    reduce-css-calc "^1.3.0"
+    reduce-css-calc "^2.1.7"
 
 rechoir@^0.6.2:
   version "0.6.2"
@@ -14811,21 +14811,13 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
-reduce-css-calc@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
-  integrity sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=
+reduce-css-calc@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2"
+  integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA==
   dependencies:
-    balanced-match "^0.4.2"
-    math-expression-evaluator "^1.2.14"
-    reduce-function-call "^1.0.1"
-
-reduce-function-call@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f"
-  integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==
-  dependencies:
-    balanced-match "^1.0.0"
+    css-unit-converter "^1.1.1"
+    postcss-value-parser "^3.3.0"
 
 reflect.ownkeys@^0.2.0:
   version "0.2.0"

From 024f94d00a7baf38ed94c9503cc6236aba0277e4 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 27 Apr 2020 14:20:21 +0200
Subject: [PATCH 08/30] fix label positioning for bars in composed charts

---
 packages/charts/src/components/ComposedChart/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 98e5c58fd9b..a5c6f1845d4 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -86,7 +86,7 @@ export interface ComposedChartProps extends RechartBaseProps {
    * layout for showing measures. `horizontal` bars would equal the column chart, `vertical` would be a bar chart.
    * Default Value: `horizontal`
    */
-  // layout?: 'horizontal' | 'vertical';
+  layout?: 'horizontal' | 'vertical';
 }
 
 enum ChartTypes {
@@ -292,7 +292,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.barSize = element.width;
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
-              labelPosition = element.stackId ? 'insideRight' : 'right';
+              labelPosition = element.stackId ? 'insideTop' : 'top';
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;

From eb7c92932f0127b1a472d1002fe35e9355c206bb Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 14:30:20 +0200
Subject: [PATCH 09/30] fix(hide data labels when there are too much data)

---
 .../charts/src/components/ComposedChart/index.tsx  | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index a5c6f1845d4..e1e7d5f3399 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -248,7 +248,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
                 tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
-                padding={{ left: paddingCharts / 2, right: paddingCharts / 2 }}
+                padding={{ left: paddingCharts, right: paddingCharts }}
               />
             );
           })}
@@ -285,6 +285,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.strokeWidth = element.width;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.dot = !isBigDataSet;
+              chartElementProps.label = isBigDataSet ? (
+                false
+              ) : (
+                <CustomDataLabel config={element} chartType="line" position="top" />
+              );
               break;
             case 'bar':
               chartElementProps.fillOpacity = element.opacity;
@@ -292,7 +297,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.barSize = element.width;
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
-              labelPosition = element.stackId ? 'insideTop' : 'top';
+              chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
@@ -300,6 +305,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.strokeWidth = element.width;
+              chartElementProps.label = isBigDataSet ? (
+                false
+              ) : (
+                <CustomDataLabel config={element} chartType="line" position="top" />
+              );
               break;
           }
           return (

From bcbbaf6d8324008cacb9142508b46cf2c03a49b1 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 14:45:15 +0200
Subject: [PATCH 10/30] fix (reference line in composed chart)

---
 .../charts/src/components/ComposedChart/index.tsx  | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index e1e7d5f3399..f61a5282d32 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -13,6 +13,7 @@ import {
   ComposedChart as ComposedChartLib,
   Legend,
   Line,
+  ReferenceLine,
   Tooltip,
   XAxis,
   YAxis
@@ -123,6 +124,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
       legendPosition: 'top',
       zoomingTool: false,
       barGap: undefined,
+      referenceLine: {
+        label: undefined,
+        value: undefined,
+        color: undefined
+      },
       secondYAxis: {
         name: undefined,
         dataKey: undefined,
@@ -269,6 +275,14 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             interval={0}
           />
         )}
+        {chartConfig.referenceLine && (
+          <ReferenceLine
+            stroke={chartConfig.referenceLine.color}
+            y={chartConfig.referenceLine.value}
+            label={chartConfig.referenceLine.label}
+            yAxisId={'left'}
+          />
+        )}
         <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {measures?.map((element, index) => {

From 22a748af595bffdbfedc9e9b2edf8e37a5b1ac62 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 27 Apr 2020 15:18:27 +0200
Subject: [PATCH 11/30] Combined Chart: Support Vertical Layout

---
 .../src/components/ComposedChart/index.tsx    | 86 ++++++++++++++-----
 1 file changed, 64 insertions(+), 22 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index a5c6f1845d4..926f11686d9 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -239,34 +239,66 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
             const XAxisLabel = useAxisLabel(dimension.formatter);
-            return (
-              <XAxis
-                key={dimension.accessor}
-                dataKey={dimension.accessor}
-                xAxisId={index}
-                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
-                tickLine={index < 1}
-                axisLine={index < 1}
-                padding={{ left: paddingCharts / 2, right: paddingCharts / 2 }}
-              />
-            );
+            let AxisComponent;
+            const axisProps = {
+              key: dimension.accessor,
+              dataKey: dimension.accessor,
+              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
+              tick: index === 0 ? XAxisLabel : SecondaryDimensionLabel,
+              tickLine: index < 1,
+              axisLine: index < 1,
+              padding: { left: paddingCharts / 2, right: paddingCharts / 2 }
+            };
+
+            if (layout === 'vertical') {
+              axisProps.type = 'category';
+              AxisComponent = YAxis;
+            } else {
+              axisProps.dataKey = dimension.accessor;
+              AxisComponent = XAxis;
+            }
+
+            return <AxisComponent {...axisProps} />;
           })}
-        <YAxis
-          axisLine={chartConfig.yAxisVisible ?? false}
-          tickLine={false}
-          yAxisId="left"
-          tickFormatter={primaryMeasure?.formatter}
-          interval={0}
-        />
-        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
+        {layout === 'horizontal' && (
+          <YAxis
+            axisLine={chartConfig.yAxisVisible ?? false}
+            tickLine={false}
+            yAxisId="primary"
+            tickFormatter={primaryMeasure?.formatter}
+            interval={0}
+          />
+        )}
+        {layout === 'vertical' && (
+          <XAxis
+            axisLine={chartConfig.yAxisVisible ?? false}
+            tickLine={false}
+            xAxisId="primary"
+            tickFormatter={primaryMeasure?.formatter}
+            interval={0}
+            type="number"
+          />
+        )}
+
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'horizontal' && (
           <YAxis
             dataKey={chartConfig.secondYAxis.dataKey}
             stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="right"
-            yAxisId="right"
+            yAxisId="secondary"
+            interval={0}
+          />
+        )}
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'vertical' && (
+          <XAxis
+            dataKey={chartConfig.secondYAxis.dataKey}
+            stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
+            label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
+            orientation="top"
+            xAxisId="secondary"
             interval={0}
+            type="number"
           />
         )}
         <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
@@ -293,6 +325,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
               labelPosition = element.stackId ? 'insideTop' : 'top';
+              if (layout === 'vertical') {
+                labelPosition = element.stackId ? 'insideRight' : 'right';
+              }
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
@@ -302,9 +337,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.strokeWidth = element.width;
               break;
           }
+
+          if (layout === 'vertical') {
+            chartElementProps.xAxisId =
+              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
+          } else {
+            chartElementProps.yAxisId =
+              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
+          }
           return (
             <ChartElement
-              yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.accessor}
               name={element.label ?? element.accessor}
               label={<CustomDataLabel config={element} chartType={element.type} position={labelPosition} />}

From 754c9f8786ca4a599281ba6b131e1d075b1bf1e8 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 15:25:09 +0200
Subject: [PATCH 12/30] added maxBarSize

---
 packages/charts/src/components/ComposedChart/index.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index f61a5282d32..1ce380e1a4c 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -254,7 +254,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
                 tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
-                padding={{ left: paddingCharts, right: paddingCharts }}
+                padding={{ left: paddingCharts / 2, right: paddingCharts / 2 }}
               />
             );
           })}
@@ -312,6 +312,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
               chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
+              chartElementProps.maxBarSize = 40;
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;

From da57c4b14ae24e2bee03b6b218d9de4f017944bb Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 15:28:55 +0200
Subject: [PATCH 13/30] Revert "Merge branch 'fix/charts' of
 https://github.com/SAP/ui5-webcomponents-react into fix/charts"

This reverts commit d9055cc6cc383c4a5af51bd49e56c360fbfee07f, reversing
changes made to 754c9f8786ca4a599281ba6b131e1d075b1bf1e8.
---
 .../src/components/ComposedChart/index.tsx    | 87 +++++--------------
 1 file changed, 23 insertions(+), 64 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index b4641c4d215..1ce380e1a4c 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -245,66 +245,34 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
             const XAxisLabel = useAxisLabel(dimension.formatter);
-            let AxisComponent;
-            const axisProps = {
-              key: dimension.accessor,
-              dataKey: dimension.accessor,
-              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
-              tick: index === 0 ? XAxisLabel : SecondaryDimensionLabel,
-              tickLine: index < 1,
-              axisLine: index < 1,
-              padding: { left: paddingCharts, right: paddingCharts }
-            };
-
-            if (layout === 'vertical') {
-              axisProps.type = 'category';
-              AxisComponent = YAxis;
-            } else {
-              axisProps.dataKey = dimension.accessor;
-              AxisComponent = XAxis;
-            }
-
-            return <AxisComponent {...axisProps} />;
+            return (
+              <XAxis
+                key={dimension.accessor}
+                dataKey={dimension.accessor}
+                xAxisId={index}
+                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
+                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
+                tickLine={index < 1}
+                axisLine={index < 1}
+                padding={{ left: paddingCharts / 2, right: paddingCharts / 2 }}
+              />
+            );
           })}
-        {layout === 'horizontal' && (
-          <YAxis
-            axisLine={chartConfig.yAxisVisible ?? false}
-            tickLine={false}
-            yAxisId="primary"
-            tickFormatter={primaryMeasure?.formatter}
-            interval={0}
-          />
-        )}
-        {layout === 'vertical' && (
-          <XAxis
-            axisLine={chartConfig.yAxisVisible ?? false}
-            tickLine={false}
-            xAxisId="primary"
-            tickFormatter={primaryMeasure?.formatter}
-            interval={0}
-            type="number"
-          />
-        )}
-
-        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'horizontal' && (
+        <YAxis
+          axisLine={chartConfig.yAxisVisible ?? false}
+          tickLine={false}
+          yAxisId="left"
+          tickFormatter={primaryMeasure?.formatter}
+          interval={0}
+        />
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
           <YAxis
             dataKey={chartConfig.secondYAxis.dataKey}
             stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="right"
-            yAxisId="secondary"
-            interval={0}
-          />
-        )}
-        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'vertical' && (
-          <XAxis
-            dataKey={chartConfig.secondYAxis.dataKey}
-            stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
-            label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
-            orientation="top"
-            xAxisId="secondary"
+            yAxisId="right"
             interval={0}
-            type="number"
           />
         )}
         {chartConfig.referenceLine && (
@@ -344,9 +312,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
               chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
-              if (layout === 'vertical') {
-                labelPosition = element.stackId ? 'insideRight' : 'right';
-              }
+              chartElementProps.maxBarSize = 40;
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
@@ -361,16 +327,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               );
               break;
           }
-
-          if (layout === 'vertical') {
-            chartElementProps.xAxisId =
-              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
-          } else {
-            chartElementProps.yAxisId =
-              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
-          }
           return (
             <ChartElement
+              yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.accessor}
               name={element.label ?? element.accessor}
               label={<CustomDataLabel config={element} chartType={element.type} position={labelPosition} />}

From 11cf080496440c6b808d06e39b14f889442e37c9 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 15:29:34 +0200
Subject: [PATCH 14/30] Revert "added maxBarSize"

This reverts commit 754c9f8786ca4a599281ba6b131e1d075b1bf1e8.
---
 packages/charts/src/components/ComposedChart/index.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 1ce380e1a4c..f61a5282d32 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -254,7 +254,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
                 tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
-                padding={{ left: paddingCharts / 2, right: paddingCharts / 2 }}
+                padding={{ left: paddingCharts, right: paddingCharts }}
               />
             );
           })}
@@ -312,7 +312,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
               chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
-              chartElementProps.maxBarSize = 40;
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;

From 984357c9a408d273d7b77e3c9a9dd1d1df4456c8 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Mon, 27 Apr 2020 15:43:25 +0200
Subject: [PATCH 15/30] Update index.tsx

---
 .../src/components/ComposedChart/index.tsx    | 86 ++++++++++++++-----
 1 file changed, 64 insertions(+), 22 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index f61a5282d32..b4641c4d215 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -245,34 +245,66 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
             const XAxisLabel = useAxisLabel(dimension.formatter);
-            return (
-              <XAxis
-                key={dimension.accessor}
-                dataKey={dimension.accessor}
-                xAxisId={index}
-                interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
-                tickLine={index < 1}
-                axisLine={index < 1}
-                padding={{ left: paddingCharts, right: paddingCharts }}
-              />
-            );
+            let AxisComponent;
+            const axisProps = {
+              key: dimension.accessor,
+              dataKey: dimension.accessor,
+              interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
+              tick: index === 0 ? XAxisLabel : SecondaryDimensionLabel,
+              tickLine: index < 1,
+              axisLine: index < 1,
+              padding: { left: paddingCharts, right: paddingCharts }
+            };
+
+            if (layout === 'vertical') {
+              axisProps.type = 'category';
+              AxisComponent = YAxis;
+            } else {
+              axisProps.dataKey = dimension.accessor;
+              AxisComponent = XAxis;
+            }
+
+            return <AxisComponent {...axisProps} />;
           })}
-        <YAxis
-          axisLine={chartConfig.yAxisVisible ?? false}
-          tickLine={false}
-          yAxisId="left"
-          tickFormatter={primaryMeasure?.formatter}
-          interval={0}
-        />
-        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
+        {layout === 'horizontal' && (
+          <YAxis
+            axisLine={chartConfig.yAxisVisible ?? false}
+            tickLine={false}
+            yAxisId="primary"
+            tickFormatter={primaryMeasure?.formatter}
+            interval={0}
+          />
+        )}
+        {layout === 'vertical' && (
+          <XAxis
+            axisLine={chartConfig.yAxisVisible ?? false}
+            tickLine={false}
+            xAxisId="primary"
+            tickFormatter={primaryMeasure?.formatter}
+            interval={0}
+            type="number"
+          />
+        )}
+
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'horizontal' && (
           <YAxis
             dataKey={chartConfig.secondYAxis.dataKey}
             stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="right"
-            yAxisId="right"
+            yAxisId="secondary"
+            interval={0}
+          />
+        )}
+        {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'vertical' && (
+          <XAxis
+            dataKey={chartConfig.secondYAxis.dataKey}
+            stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
+            label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
+            orientation="top"
+            xAxisId="secondary"
             interval={0}
+            type="number"
           />
         )}
         {chartConfig.referenceLine && (
@@ -312,6 +344,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.stackId = element.stackId ?? undefined;
               chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
+              if (layout === 'vertical') {
+                labelPosition = element.stackId ? 'insideRight' : 'right';
+              }
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;
@@ -326,9 +361,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               );
               break;
           }
+
+          if (layout === 'vertical') {
+            chartElementProps.xAxisId =
+              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
+          } else {
+            chartElementProps.yAxisId =
+              chartConfig?.secondYAxis?.dataKey === element.accessor ? 'secondary' : 'primary';
+          }
           return (
             <ChartElement
-              yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.accessor}
               name={element.label ?? element.accessor}
               label={<CustomDataLabel config={element} chartType={element.type} position={labelPosition} />}

From 3ad5464e59270172b5c36e97c2941ec557cd006e Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 27 Apr 2020 15:54:15 +0200
Subject: [PATCH 16/30] refactoring

---
 .../src/components/BarChart/BarChart.tsx      | 19 ++----
 .../components/ColumnChart/ColumnChart.tsx    |  9 +--
 .../ComposedChart/ComposedChart.stories.tsx   |  1 +
 .../src/components/ComposedChart/index.tsx    | 19 +++---
 .../src/components/LineChart/LineChart.tsx    |  9 +--
 .../src/components/RadarChart/RadarChart.tsx  |  4 +-
 .../charts/src/hooks/useLabelElements.tsx     | 67 ++-----------------
 .../charts/src/internal/ChartDataLabel.tsx    | 48 +++++++++++++
 .../charts/src/internal/CustomElements.tsx    | 28 +-------
 packages/charts/src/internal/XAxisTicks.tsx   | 45 +++++++++++++
 packages/charts/src/util/Utils.ts             | 21 ------
 11 files changed, 131 insertions(+), 139 deletions(-)
 create mode 100644 packages/charts/src/internal/ChartDataLabel.tsx
 create mode 100644 packages/charts/src/internal/XAxisTicks.tsx

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index b53a81834d9..85a0431671e 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -17,12 +17,15 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { ChartDataLabel } from '../../internal/ChartDataLabel';
+import { YAxisTicks } from '../../internal/CustomElements';
+import { XAxisTicks } from '../../internal/XAxisTicks';
 
 const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
@@ -173,8 +176,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
     chartConfig.zoomingTool
   );
 
-  const XAxisLabel = useAxisLabel(primaryMeasure?.formatter);
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -196,7 +197,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
           <XAxis
             interval={0}
             type="number"
-            tick={XAxisLabel}
+            tick={<XAxisTicks config={primaryMeasure} />}
             axisLine={chartConfig.xAxisVisible ?? true}
             tickFormatter={primaryMeasure?.formatter}
           />
@@ -204,9 +205,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
         {(chartConfig.yAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
             const YAxisLabel =
-              index > 0
-                ? useSecondaryDimensionLabel(true, dimension.formatter)
-                : useAxisLabel(dimension.formatter, true);
+              index > 0 ? useSecondaryDimensionLabel(true, dimension.formatter) : <YAxisTicks config={dimension} />;
             return (
               <YAxis
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
@@ -230,11 +229,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
               label={
-                <CustomDataLabel
-                  config={element}
-                  chartType="bar"
-                  position={element.stackId ? 'insideRight' : 'right'}
-                />
+                <ChartDataLabel config={element} chartType="bar" position={element.stackId ? 'insideRight' : 'right'} />
               }
               type="monotone"
               dataKey={element.accessor}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index d61826a7fa5..17d2940ee97 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -17,12 +17,14 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { ChartDataLabel } from '../../internal/ChartDataLabel';
+import { XAxisTicks } from '../../internal/XAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -196,14 +198,13 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
         />
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
-            const XAxisLabel = useAxisLabel(dimension.formatter);
             return (
               <XAxis
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
+                tick={index === 0 ? <XAxisTicks config={dimension} /> : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
               />
@@ -236,7 +237,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
               label={
-                <CustomDataLabel config={element} chartType="column" position={element.stackId ? 'inside' : 'top'} />
+                <ChartDataLabel config={element} chartType="column" position={element.stackId ? 'inside' : 'top'} />
               }
               type="monotone"
               dataKey={element.accessor}
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
index a606eda975d..e0f189312a6 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -163,6 +163,7 @@ export const withReferenceLineStory = () => {
       onLegendClick={action('onLegendClick')}
       dataset={bigDataSet}
       dimensions={[{ accessor: 'name' }]}
+      layout={select('layout', ['horizontal', 'vertical'], 'horizontal')}
       measures={[
         {
           accessor: 'users',
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index b4641c4d215..8968eaf217c 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -19,12 +19,14 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { ChartDataLabel } from '../../internal/ChartDataLabel';
+import { XAxisTicks } from '../../internal/XAxisTicks';
 
 const dimensionDefaults = {
   formatter: (d) => d
@@ -244,13 +246,12 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         />
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
-            const XAxisLabel = useAxisLabel(dimension.formatter);
             let AxisComponent;
             const axisProps = {
               key: dimension.accessor,
               dataKey: dimension.accessor,
               interval: dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0),
-              tick: index === 0 ? XAxisLabel : SecondaryDimensionLabel,
+              tick: index === 0 ? <XAxisTicks config={dimension} /> : SecondaryDimensionLabel,
               tickLine: index < 1,
               axisLine: index < 1,
               padding: { left: paddingCharts, right: paddingCharts }
@@ -310,9 +311,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         {chartConfig.referenceLine && (
           <ReferenceLine
             stroke={chartConfig.referenceLine.color}
-            y={chartConfig.referenceLine.value}
+            y={layout === 'horizontal' ? chartConfig.referenceLine.value : undefined}
+            x={layout === 'vertical' ? chartConfig.referenceLine.value : undefined}
             label={chartConfig.referenceLine.label}
-            yAxisId={'left'}
+            yAxisId={layout === 'horizontal' ? 'primary' : undefined}
+            xAxisId={layout === 'vertical' ? 'primary' : undefined}
           />
         )}
         <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
@@ -334,7 +337,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.label = isBigDataSet ? (
                 false
               ) : (
-                <CustomDataLabel config={element} chartType="line" position="top" />
+                <ChartDataLabel config={element} chartType="line" position="top" />
               );
               break;
             case 'bar':
@@ -357,7 +360,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.label = isBigDataSet ? (
                 false
               ) : (
-                <CustomDataLabel config={element} chartType="line" position="top" />
+                <ChartDataLabel config={element} chartType="line" position="top" />
               );
               break;
           }
@@ -373,7 +376,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             <ChartElement
               key={element.accessor}
               name={element.label ?? element.accessor}
-              label={<CustomDataLabel config={element} chartType={element.type} position={labelPosition} />}
+              label={<ChartDataLabel config={element} chartType={element.type} position={labelPosition} />}
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               type="monotone"
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 08572a25630..5f20d4f2a60 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -17,12 +17,14 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { CustomDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { ChartDataLabel } from '../../internal/ChartDataLabel';
+import { XAxisTicks } from '../../internal/XAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -187,14 +189,13 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
         />
         {(chartConfig.xAxisVisible ?? true) &&
           dimensions.map((dimension, index) => {
-            const XAxisLabel = useAxisLabel(dimension.formatter);
             return (
               <XAxis
                 key={dimension.accessor}
                 dataKey={dimension.accessor}
                 xAxisId={index}
                 interval={dimension?.interval ?? (isBigDataSet ? 'preserveStart' : 0)}
-                tick={index === 0 ? XAxisLabel : SecondaryDimensionLabel}
+                tick={index === 0 ? <XAxisTicks config={dimension} /> : SecondaryDimensionLabel}
                 tickLine={index < 1}
                 axisLine={index < 1}
               />
@@ -225,7 +226,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={isBigDataSet ? false : <CustomDataLabel config={element} chartType="line" position="top" />}
+              label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
               type="monotone"
               dataKey={element.accessor}
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index eccde741494..33e8933bd1e 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -14,12 +14,12 @@ import {
   RadarChart as RadarChartLib,
   Tooltip
 } from 'recharts';
-import { CustomDataLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
+import { ChartDataLabel } from '../../internal/ChartDataLabel';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -155,7 +155,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fillOpacity={element.opacity}
               label={
-                <CustomDataLabel
+                <ChartDataLabel
                   config={element}
                   chartType="radar"
                   position={element.stackId ? 'insideRight' : 'right'}
diff --git a/packages/charts/src/hooks/useLabelElements.tsx b/packages/charts/src/hooks/useLabelElements.tsx
index 4323a4d47ca..ba1bf7f1110 100644
--- a/packages/charts/src/hooks/useLabelElements.tsx
+++ b/packages/charts/src/hooks/useLabelElements.tsx
@@ -1,72 +1,13 @@
-import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
-import React, { FC, useCallback } from 'react';
-import { IChartMeasure } from '../interfaces/IChartMeasure';
-import Label from '../internal/ChartLabel';
-import { SecondaryDimensionTicksXAxis, SecondaryDimensionTicksYAxis, YAxisTicks } from '../internal/CustomElements';
-import { getTextWidth, renderAxisTicks } from '../util/Utils';
-
-interface CustomDataLabelProps {
-  config: IChartMeasure;
-  viewBox?: any;
-  chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie';
-  position?: string;
-  value?: any;
-  children?: any;
-}
-
-export const CustomDataLabel: FC<CustomDataLabelProps> = (props: CustomDataLabelProps) => {
-  const { config, chartType } = props;
-
-  const viewBox = Label.parseViewBox(props);
-
-  if (config.hideDataLabel) {
-    return null;
-  }
-
-  if (config.DataLabel) {
-    return config.DataLabel(props);
-  }
-
-  const formattedLabel = config.formatter(props.value ?? props.children);
-  if (chartType === 'bar' || chartType === 'column') {
-    if (viewBox.width < getTextWidth(formattedLabel)) {
-      return null;
-    }
-    if (viewBox.height < 12) {
-      return null;
-    }
-  }
-
-  return (
-    <Label
-      fill={ThemingParameters.sapContent_LabelColor}
-      viewBox={viewBox}
-      {...(props as any)}
-      content={undefined}
-      value={formattedLabel}
-    />
-  );
-};
-
-export const useAxisLabel = (AxisFormatter, yAxis?) => {
-  return useCallback(
-    (labelProps) => {
-      return yAxis ? YAxisTicks(labelProps, AxisFormatter) : renderAxisTicks(labelProps, AxisFormatter);
-    },
-    [AxisFormatter]
-  );
-};
+import React, { useCallback } from 'react';
+import { SecondaryDimensionTicksXAxis, SecondaryDimensionTicksYAxis } from '../internal/CustomElements';
 
 let dimension = '';
 export const useSecondaryDimensionLabel = (yAxis?: boolean, yAxisFormatter?) => {
   return useCallback((labelProps) => {
     if (dimension === labelProps.payload.value) {
       return undefined;
-    } else {
-      dimension = labelProps.payload.value;
-      return yAxis
-        ? SecondaryDimensionTicksYAxis(labelProps, yAxisFormatter)
-        : SecondaryDimensionTicksXAxis(labelProps);
     }
+    dimension = labelProps.payload.value;
+    return yAxis ? SecondaryDimensionTicksYAxis(labelProps, yAxisFormatter) : SecondaryDimensionTicksXAxis(labelProps);
   }, []);
 };
diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx
new file mode 100644
index 00000000000..2c1daff7e6c
--- /dev/null
+++ b/packages/charts/src/internal/ChartDataLabel.tsx
@@ -0,0 +1,48 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import React, { FC } from 'react';
+import { IChartMeasure } from '../interfaces/IChartMeasure';
+import { getTextWidth } from '../util/Utils';
+import Label from './ChartLabel';
+
+interface CustomDataLabelProps {
+  config: IChartMeasure;
+  viewBox?: any;
+  chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie';
+  position?: string;
+  value?: any;
+  children?: any;
+}
+
+export const ChartDataLabel: FC<CustomDataLabelProps> = (props: CustomDataLabelProps) => {
+  const { config, chartType } = props;
+
+  const viewBox = Label.parseViewBox(props);
+
+  if (config.hideDataLabel) {
+    return null;
+  }
+
+  if (config.DataLabel) {
+    return config.DataLabel(props);
+  }
+
+  const formattedLabel = config.formatter(props.value ?? props.children);
+  if (chartType === 'bar' || chartType === 'column') {
+    if (viewBox.width < getTextWidth(formattedLabel)) {
+      return null;
+    }
+    if (viewBox.height < 12) {
+      return null;
+    }
+  }
+
+  return (
+    <Label
+      fill={ThemingParameters.sapContent_LabelColor}
+      viewBox={viewBox}
+      {...(props as any)}
+      content={undefined}
+      value={formattedLabel}
+    />
+  );
+};
diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
index 57762af9c0b..720a0fb15b3 100644
--- a/packages/charts/src/internal/CustomElements.tsx
+++ b/packages/charts/src/internal/CustomElements.tsx
@@ -3,31 +3,9 @@ import React from 'react';
 
 let globalRotate = false;
 
-export const XAxisTicks = (props, formatter, rotate) => {
-  const { x, y, payload } = props;
-  globalRotate = !!rotate;
-  const formattedValue = formatter(payload.value);
-  const tickValue = rotate
-    ? formattedValue.length > 10
-      ? `${formattedValue.slice(0, 8)}...`
-      : formattedValue
-    : formattedValue;
-  return (
-    <g transform={`translate(${x},${y + 10})`}>
-      <text
-        fill={ThemingParameters.sapNeutralBorderColor}
-        transform={rotate ? 'rotate(-35)' : ''}
-        textAnchor={rotate ? 'end' : 'middle'}
-      >
-        {`${tickValue}`}
-      </text>
-    </g>
-  );
-};
-
-export const YAxisTicks = (props, formatter) => {
-  const { x, y, payload } = props;
-  const formattedValue = formatter(payload.value);
+export const YAxisTicks = (props) => {
+  const { x, y, payload, config } = props;
+  const formattedValue = config.formatter(payload.value);
   const tickValue = formattedValue.length > 10 ? `${formattedValue.slice(0, 13)}...` : formattedValue;
   return (
     <g transform={`translate(${x},${y + 3})`}>
diff --git a/packages/charts/src/internal/XAxisTicks.tsx b/packages/charts/src/internal/XAxisTicks.tsx
new file mode 100644
index 00000000000..1061b82f562
--- /dev/null
+++ b/packages/charts/src/internal/XAxisTicks.tsx
@@ -0,0 +1,45 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import React from 'react';
+
+let globalRotate = false;
+export const XAxisTicksInternal = (props, rotate) => {
+  const { x, y, payload, config } = props;
+  globalRotate = !!rotate;
+  const formattedValue = config.formatter(payload.value);
+  const tickValue = rotate
+    ? formattedValue.length > 10
+      ? `${formattedValue.slice(0, 8)}...`
+      : formattedValue
+    : formattedValue;
+  return (
+    <g transform={`translate(${x},${y + 10})`}>
+      <text
+        fill={ThemingParameters.sapNeutralBorderColor}
+        transform={rotate ? 'rotate(-35)' : ''}
+        textAnchor={rotate ? 'end' : 'middle'}
+      >
+        {`${tickValue}`}
+      </text>
+    </g>
+  );
+};
+
+let previousX = 0;
+let secondElementX = 0;
+export const XAxisTicks = (props) => {
+  const { payload } = props;
+  const prevX = previousX;
+  const index = payload.index ?? props.index;
+  switch (index) {
+    case 0:
+      previousX = payload.coordinate;
+      return XAxisTicksInternal(props, secondElementX - payload.coordinate <= 100);
+    case 1:
+      secondElementX = payload.coordinate;
+      previousX = payload.coordinate;
+      return XAxisTicksInternal(props, payload.coordinate - prevX <= 100);
+    default:
+      previousX = payload.coordinate;
+      return XAxisTicksInternal(props, payload.coordinate - prevX <= 100);
+  }
+};
diff --git a/packages/charts/src/util/Utils.ts b/packages/charts/src/util/Utils.ts
index e2b60470222..0e87c410e5a 100644
--- a/packages/charts/src/util/Utils.ts
+++ b/packages/charts/src/util/Utils.ts
@@ -1,7 +1,6 @@
 import merge from 'lodash.merge';
 import { useMemo } from 'react';
 import { defaultFont } from '../config';
-import { XAxisTicks } from '../internal/CustomElements';
 
 export const useMergedConfig = (x, y) => {
   return useMemo(() => {
@@ -68,23 +67,3 @@ export const getTextHeight = (text = 'M', font = `normal ${defaultFont.size}pt $
   const metrics = context.measureText(text); // should be around 90% accurate...
   return textHeight || (textHeight = metrics.width);
 };
-
-let previousX = 0;
-let secondElementX = 0;
-export const renderAxisTicks = (axisProps, xAxisFormatter) => {
-  const { payload } = axisProps;
-  const prevX = previousX;
-  const index = payload.index ?? axisProps.index;
-  switch (index) {
-    case 0:
-      previousX = payload.coordinate;
-      return XAxisTicks(axisProps, xAxisFormatter, secondElementX - payload.coordinate <= 100);
-    case 1:
-      secondElementX = payload.coordinate;
-      previousX = payload.coordinate;
-      return XAxisTicks(axisProps, xAxisFormatter, payload.coordinate - prevX <= 100);
-    default:
-      previousX = payload.coordinate;
-      return XAxisTicks(axisProps, xAxisFormatter, payload.coordinate - prevX <= 100);
-  }
-};

From 41ff903f68caf59374857ca17afb16ed2024dc74 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 27 Apr 2020 18:06:18 +0200
Subject: [PATCH 17/30] LabelColoring

---
 .storybook/preview-head.html                  |  1 +
 .../src/components/BarChart/BarChart.tsx      |  6 +--
 .../BarChart/BarRechart.stories.tsx           | 16 +++++-
 .../components/ColumnChart/ColumnChart.tsx    |  7 ++-
 .../src/components/ComposedChart/index.tsx    | 49 ++++++++-----------
 .../src/components/LineChart/LineChart.tsx    |  2 +
 .../src/components/RadarChart/RadarChart.tsx  |  8 +--
 .../charts/src/internal/ChartContainer.tsx    |  2 +-
 .../charts/src/internal/ChartDataLabel.tsx    | 17 +++----
 .../charts/src/internal/CustomElements.tsx    | 28 +----------
 packages/charts/src/internal/XAxisTicks.tsx   |  2 +-
 packages/charts/src/internal/YAxisTicks.tsx   | 15 ++++++
 12 files changed, 70 insertions(+), 83 deletions(-)
 create mode 100644 packages/charts/src/internal/YAxisTicks.tsx

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 9942c1c49c6..21cfd076a46 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,6 +1,7 @@
 <style>
     body {
         font-family: '72', Arial, Helvetica, sans-serif;
+        background-color: var(--sapBackgroundColor);
     }
 
     .pageWithPadding > section {
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 85a0431671e..b85d0aecaa4 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -24,8 +24,8 @@ import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '../../internal/ChartDataLabel';
-import { YAxisTicks } from '../../internal/CustomElements';
 import { XAxisTicks } from '../../internal/XAxisTicks';
+import { YAxisTicks } from '../../internal/YAxisTicks';
 
 const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
@@ -228,9 +228,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={
-                <ChartDataLabel config={element} chartType="bar" position={element.stackId ? 'insideRight' : 'right'} />
-              }
+              label={<ChartDataLabel config={element} chartType="bar" position="insideRight" />}
               type="monotone"
               dataKey={element.accessor}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
diff --git a/packages/charts/src/components/BarChart/BarRechart.stories.tsx b/packages/charts/src/components/BarChart/BarRechart.stories.tsx
index 704830752b6..a3f9da9d1ae 100644
--- a/packages/charts/src/components/BarChart/BarRechart.stories.tsx
+++ b/packages/charts/src/components/BarChart/BarRechart.stories.tsx
@@ -165,7 +165,21 @@ export const withReferenceLineStory = () => {
           accessor: 'volume'
         }
       ]}
-      style={{ width: '95%', height: '70vh' }}
+      style={{
+        width: '95%',
+        height: '70vh',
+        '--sapChart_OrderedColor_1': '#0f828f',
+        '--sapChart_OrderedColor_2': '#5ac2ce',
+        '--sapChart_OrderedColor_3': '#03734d',
+        '--sapChart_OrderedColor_4': '#66c2a3',
+        '--sapChart_OrderedColor_5': '#3c6372',
+        '--sapChart_OrderedColor_6': '#adbcc3',
+        '--sapChart_OrderedColor_7': '#144b7f',
+        '--sapChart_OrderedColor_8': '#698caf',
+        '--sapChart_OrderedColor_9': '#d62f2f',
+        '--sapChart_OrderedColor_10': '#f8a6a6',
+        '--sapChart_OrderedColor_11': '#921473'
+      }}
       noLegend={false}
       loading
       chartConfig={{
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 17d2940ee97..7c3874c1671 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -25,6 +25,7 @@ import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '../../internal/ChartDataLabel';
 import { XAxisTicks } from '../../internal/XAxisTicks';
+import { YAxisTicks } from '../../internal/YAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -214,8 +215,8 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           axisLine={chartConfig.yAxisVisible ?? false}
           tickLine={false}
           yAxisId="left"
-          tickFormatter={primaryMeasure?.formatter}
           interval={0}
+          tick={<YAxisTicks config={primaryMeasure} />}
         />
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
           <YAxis
@@ -236,9 +237,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={
-                <ChartDataLabel config={element} chartType="column" position={element.stackId ? 'inside' : 'top'} />
-              }
+              label={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
               type="monotone"
               dataKey={element.accessor}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 8968eaf217c..fb2e96a7ff0 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -27,6 +27,7 @@ import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '../../internal/ChartDataLabel';
 import { XAxisTicks } from '../../internal/XAxisTicks';
+import { YAxisTicks } from '../../internal/YAxisTicks';
 
 const dimensionDefaults = {
   formatter: (d) => d
@@ -227,6 +228,13 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     chartConfig.zoomingTool
   );
 
+  const measureAxisProps = {
+    axisLine: chartConfig.yAxisVisible ?? false,
+    tickLine: false,
+    tickFormatter: primaryMeasure?.formatter,
+    interval: 0
+  };
+
   return (
     <ChartContainer
       ref={chartRef}
@@ -268,23 +276,10 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             return <AxisComponent {...axisProps} />;
           })}
         {layout === 'horizontal' && (
-          <YAxis
-            axisLine={chartConfig.yAxisVisible ?? false}
-            tickLine={false}
-            yAxisId="primary"
-            tickFormatter={primaryMeasure?.formatter}
-            interval={0}
-          />
+          <YAxis {...measureAxisProps} yAxisId="primary" tick={<YAxisTicks config={primaryMeasure} />} />
         )}
         {layout === 'vertical' && (
-          <XAxis
-            axisLine={chartConfig.yAxisVisible ?? false}
-            tickLine={false}
-            xAxisId="primary"
-            tickFormatter={primaryMeasure?.formatter}
-            interval={0}
-            type="number"
-          />
+          <XAxis {...measureAxisProps} xAxisId="primary" type="number" tick={<XAxisTicks config={primaryMeasure} />} />
         )}
 
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'horizontal' && (
@@ -293,8 +288,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="right"
-            yAxisId="secondary"
             interval={0}
+            yAxisId="secondary"
           />
         )}
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && layout === 'vertical' && (
@@ -303,8 +298,8 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             stroke={chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 11) + 1})`}
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="top"
-            xAxisId="secondary"
             interval={0}
+            xAxisId="secondary"
             type="number"
           />
         )}
@@ -334,11 +329,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.strokeWidth = element.width;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.dot = !isBigDataSet;
-              chartElementProps.label = isBigDataSet ? (
-                false
-              ) : (
-                <ChartDataLabel config={element} chartType="line" position="top" />
-              );
               break;
             case 'bar':
               chartElementProps.fillOpacity = element.opacity;
@@ -348,7 +338,9 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.stackId = element.stackId ?? undefined;
               chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
               if (layout === 'vertical') {
-                labelPosition = element.stackId ? 'insideRight' : 'right';
+                labelPosition = 'insideRight';
+              } else {
+                labelPosition = 'insideTop';
               }
               break;
             case 'area':
@@ -357,11 +349,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.onClick = onDataPointClickInternal;
               chartElementProps.strokeWidth = element.width;
-              chartElementProps.label = isBigDataSet ? (
-                false
-              ) : (
-                <ChartDataLabel config={element} chartType="line" position="top" />
-              );
               break;
           }
 
@@ -376,7 +363,11 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
             <ChartElement
               key={element.accessor}
               name={element.label ?? element.accessor}
-              label={<ChartDataLabel config={element} chartType={element.type} position={labelPosition} />}
+              label={
+                isBigDataSet ? null : (
+                  <ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
+                )
+              }
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               type="monotone"
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 5f20d4f2a60..3078b0f7903 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -25,6 +25,7 @@ import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
 import { ChartDataLabel } from '../../internal/ChartDataLabel';
 import { XAxisTicks } from '../../internal/XAxisTicks';
+import { YAxisTicks } from '../../internal/YAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -207,6 +208,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
           yAxisId="left"
           tickFormatter={primaryMeasure?.formatter}
           interval={0}
+          tick={<YAxisTicks config={primaryMeasure} />}
         />
         {chartConfig.secondYAxis && chartConfig.secondYAxis.dataKey && (
           <YAxis
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 33e8933bd1e..52f85fa646c 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -154,13 +154,7 @@ const RadarChart: FC<RadarChartProps> = forwardRef((props: RadarChartProps, ref:
               stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 11) + 1})`}
               fillOpacity={element.opacity}
-              label={
-                <ChartDataLabel
-                  config={element}
-                  chartType="radar"
-                  position={element.stackId ? 'insideRight' : 'right'}
-                />
-              }
+              label={<ChartDataLabel config={element} chartType="radar" position={'outside'} />}
             />
           );
         })}
diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
index 8be39cf9859..a0b45bfb490 100644
--- a/packages/charts/src/internal/ChartContainer.tsx
+++ b/packages/charts/src/internal/ChartContainer.tsx
@@ -1,8 +1,8 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
 import { Loader } from '@ui5/webcomponents-react/lib/Loader';
 import React, { ComponentType, CSSProperties, FC, forwardRef, ReactNode, Ref, useMemo } from 'react';
 import { ResponsiveContainer } from 'recharts';
-import { CommonProps } from '@ui5/webcomponents-react/interfaces/CommonProps';
 
 export interface ContainerProps extends CommonProps {
   children: ReactNode;
diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx
index 2c1daff7e6c..4f721c618a3 100644
--- a/packages/charts/src/internal/ChartDataLabel.tsx
+++ b/packages/charts/src/internal/ChartDataLabel.tsx
@@ -7,7 +7,7 @@ import Label from './ChartLabel';
 interface CustomDataLabelProps {
   config: IChartMeasure;
   viewBox?: any;
-  chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie';
+  chartType: 'bar' | 'column' | 'line' | 'radar' | 'pie' | 'area';
   position?: string;
   value?: any;
   children?: any;
@@ -36,13 +36,10 @@ export const ChartDataLabel: FC<CustomDataLabelProps> = (props: CustomDataLabelP
     }
   }
 
-  return (
-    <Label
-      fill={ThemingParameters.sapContent_LabelColor}
-      viewBox={viewBox}
-      {...(props as any)}
-      content={undefined}
-      value={formattedLabel}
-    />
-  );
+  let fill = ThemingParameters.sapContent_ContrastTextColor;
+  if (['area', 'line', 'radar'].includes(chartType)) {
+    fill = ThemingParameters.sapTextColor; // label is displayed outside of the colored element
+  }
+
+  return <Label fill={fill} viewBox={viewBox} {...(props as any)} content={undefined} value={formattedLabel} />;
 };
diff --git a/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
index 720a0fb15b3..ab83c043e36 100644
--- a/packages/charts/src/internal/CustomElements.tsx
+++ b/packages/charts/src/internal/CustomElements.tsx
@@ -3,19 +3,6 @@ import React from 'react';
 
 let globalRotate = false;
 
-export const YAxisTicks = (props) => {
-  const { x, y, payload, config } = props;
-  const formattedValue = config.formatter(payload.value);
-  const tickValue = formattedValue.length > 10 ? `${formattedValue.slice(0, 13)}...` : formattedValue;
-  return (
-    <g transform={`translate(${x},${y + 3})`}>
-      <text fill={ThemingParameters.sapNeutralBorderColor} textAnchor={'end'}>
-        {`${tickValue}`}
-      </text>
-    </g>
-  );
-};
-
 export const SecondaryDimensionTicksXAxis = (props) => {
   const { x, y, payload } = props;
   const tickValue = payload.value.length > 12 && globalRotate ? payload.value.slice(0, 12) + '...' : payload.value;
@@ -23,9 +10,9 @@ export const SecondaryDimensionTicksXAxis = (props) => {
 
   return (
     <g transform={`translate(${x},${y + dy})`}>
-      <text fill={ThemingParameters.sapNeutralBorderColor}>|</text>
+      <text fill={ThemingParameters.sapTextColor}>|</text>
       <text
-        fill={ThemingParameters.sapNeutralBorderColor}
+        fill={ThemingParameters.sapTextColor}
         transform={globalRotate ? 'rotate(-35)' : ''}
         textAnchor={globalRotate ? 'end' : 'middle'}
         y={15}
@@ -48,14 +35,3 @@ export const SecondaryDimensionTicksYAxis = (props, yAxisFormatter) => {
     </g>
   );
 };
-
-export const DataLabel = (props, formatter, customElement) => {
-  const { x, y, value } = props;
-  const customElementClone =
-    customElement && React.cloneElement(customElement, { children: formatter(value), textAnchor: 'middle' });
-  return (
-    <g transform={`translate(${x},${y - 5})`} fill={ThemingParameters.sapNeutralBorderColor}>
-      {customElementClone}
-    </g>
-  );
-};
diff --git a/packages/charts/src/internal/XAxisTicks.tsx b/packages/charts/src/internal/XAxisTicks.tsx
index 1061b82f562..2144a2475d6 100644
--- a/packages/charts/src/internal/XAxisTicks.tsx
+++ b/packages/charts/src/internal/XAxisTicks.tsx
@@ -14,7 +14,7 @@ export const XAxisTicksInternal = (props, rotate) => {
   return (
     <g transform={`translate(${x},${y + 10})`}>
       <text
-        fill={ThemingParameters.sapNeutralBorderColor}
+        fill={ThemingParameters.sapContent_LabelColor}
         transform={rotate ? 'rotate(-35)' : ''}
         textAnchor={rotate ? 'end' : 'middle'}
       >
diff --git a/packages/charts/src/internal/YAxisTicks.tsx b/packages/charts/src/internal/YAxisTicks.tsx
new file mode 100644
index 00000000000..ec6da6dda90
--- /dev/null
+++ b/packages/charts/src/internal/YAxisTicks.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+
+export const YAxisTicks = (props) => {
+  const { x, y, payload, config } = props;
+  const formattedValue = config.formatter(payload.value);
+  const tickValue = formattedValue.length > 10 ? `${formattedValue.slice(0, 13)}...` : formattedValue;
+  return (
+    <g transform={`translate(${x},${y + 3})`}>
+      <text fill={ThemingParameters.sapContent_LabelColor} textAnchor={'end'}>
+        {`${tickValue}`}
+      </text>
+    </g>
+  );
+};

From 91440ddd0e953455109f7bc1e7758f70efbd64e2 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Mon, 27 Apr 2020 18:19:08 +0200
Subject: [PATCH 18/30] Update tests

---
 .../BarChart/__snapshots__/BarRechart.test.tsx.snap       | 4 ++--
 .../ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap | 4 ++--
 .../__snapshots__/ComposedChart.test.tsx.snap             | 4 ++--
 .../DonutChart/__snapshots__/DonutRechart.test.tsx.snap   | 4 ++--
 .../LineChart/__snapshots__/LineRechart.test.tsx.snap     | 4 ++--
 .../PieChart/__snapshots__/PieRechart.test.tsx.snap       | 4 ++--
 .../RadarChart/__snapshots__/RadarRechart.test.tsx.snap   | 4 ++--
 .../RadialChart/__snapshots__/RadialRechart.test.tsx.snap | 4 ++--
 packages/charts/src/internal/ChartLabel.tsx               | 8 ++++----
 9 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap b/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
index 39eee761822..1f17f06f276 100644
--- a/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
+++ b/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`BarRechart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 60vh; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`BarRechart Renders with data 1`] = `
 
 exports[`BarRechart loading placeholder 1`] = `
 <div
-  style="width: 30%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
index 064ef731500..c916c87fa48 100644
--- a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
+++ b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ColumnRechart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 60vh; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`ColumnRechart Renders with data 1`] = `
 
 exports[`ColumnRechart loading placeholder 1`] = `
 <div
-  style="width: 30%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap b/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
index 978793196e0..d36bea1a17e 100644
--- a/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
+++ b/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`ComposedChart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 60vh; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 60vh; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`ComposedChart Renders with data 1`] = `
 
 exports[`ComposedChart loading placeholder 1`] = `
 <div
-  style="width: 50%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap b/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap
index 1d5c24e57af..2f4b90f59f5 100644
--- a/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap
+++ b/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`DonutChart Renders with data 1`] = `
 <div
-  style="width: 50%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`DonutChart Renders with data 1`] = `
 
 exports[`DonutChart loading placeholder 1`] = `
 <div
-  style="width: 30%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap b/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap
index 434befb65be..a966e1dc115 100644
--- a/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap
+++ b/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`LineChart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 400px; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`LineChart Renders with data 1`] = `
 
 exports[`LineChart loading placeholder 1`] = `
 <div
-  style="width: 30%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 30%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap b/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap
index b7092a9862c..be11bde9c41 100644
--- a/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap
+++ b/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`PieChart Renders with data 1`] = `
 <div
-  style="width: 50%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`PieChart Renders with data 1`] = `
 
 exports[`PieChart loading placeholder 1`] = `
 <div
-  style="width: 50%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 50%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap b/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap
index 77f8c0a41d0..819d5eb8ae9 100644
--- a/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap
+++ b/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`RadarChart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 400px; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`RadarChart Renders with data 1`] = `
 
 exports[`RadarChart loading placeholder 1`] = `
 <div
-  style="width: 100%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 400px; position: relative;"
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
diff --git a/packages/charts/src/components/RadialChart/__snapshots__/RadialRechart.test.tsx.snap b/packages/charts/src/components/RadialChart/__snapshots__/RadialRechart.test.tsx.snap
index 425dc7ad1b0..e29b03809fa 100644
--- a/packages/charts/src/components/RadialChart/__snapshots__/RadialRechart.test.tsx.snap
+++ b/packages/charts/src/components/RadialChart/__snapshots__/RadialRechart.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`RadialChart Renders with data 1`] = `
 <div
-  style="width: 100%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 400px; position: relative;"
 >
   <div
     class="recharts-responsive-container"
@@ -16,7 +16,7 @@ exports[`RadialChart Renders with data 1`] = `
 
 exports[`RadialChart loading placeholder 1`] = `
 <div
-  style="width: 100%; height: 400px; position: relative;"
+  style="font-family: var(--sapFontFamily); width: 100%; height: 400px; position: relative;"
 >
   <div
     class="recharts-responsive-container"
diff --git a/packages/charts/src/internal/ChartLabel.tsx b/packages/charts/src/internal/ChartLabel.tsx
index 76953f321bc..77756161cec 100644
--- a/packages/charts/src/internal/ChartLabel.tsx
+++ b/packages/charts/src/internal/ChartLabel.tsx
@@ -2,10 +2,10 @@ import React, { cloneElement, isValidElement, ReactNode, ReactElement, createEle
 import _ from 'lodash';
 import classNames from 'classnames';
 import { Text } from 'recharts';
-import { findAllByType } from 'recharts/es6/util/ReactUtils';
-import { isNumOrStr, isNumber, isPercent, getPercentValue, uniqueId, mathSign } from 'recharts/es6/util/DataUtils';
-import { polarToCartesian } from 'recharts/es6/util/PolarUtils';
-import { PresentationAttributes, filterProps } from 'recharts/es6/util/types';
+import { findAllByType } from 'recharts/lib/util/ReactUtils';
+import { isNumOrStr, isNumber, isPercent, getPercentValue, uniqueId, mathSign } from 'recharts/lib/util/DataUtils';
+import { polarToCartesian } from 'recharts/lib/util/PolarUtils';
+import { PresentationAttributes, filterProps } from 'recharts/lib/util/types';
 
 interface CartesianViewBox {
   x?: number;

From a1b6644237bda5d4af1b2ff5c3096cd75e842cd2 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 08:08:30 +0200
Subject: [PATCH 19/30] simplify useChartMargin

---
 .../src/components/BarChart/BarChart.tsx      |  4 +-
 .../components/ColumnChart/ColumnChart.tsx    |  2 -
 .../src/components/ComposedChart/index.tsx    |  4 +-
 .../src/components/LineChart/LineChart.tsx    |  2 -
 packages/charts/src/hooks/useChartMargin.ts   | 51 ++++++-------------
 packages/charts/src/internal/YAxisTicks.tsx   |  3 +-
 packages/charts/src/util/Utils.ts             |  7 +++
 7 files changed, 26 insertions(+), 47 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index b85d0aecaa4..eb3de693b85 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -167,9 +167,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const marginChart = useChartMargin(
     dataset,
-    measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
+    dimensions,
     chartConfig.margin,
     true,
     dimensions.length > 1,
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 7c3874c1671..991178aa5ba 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -172,8 +172,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
   const marginChart = useChartMargin(
     dataset,
     measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
     chartConfig.margin,
     false,
     dimensions.length > 1,
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index fb2e96a7ff0..2b1e7d2a6fd 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -219,9 +219,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const marginChart = useChartMargin(
     dataset,
-    measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
+    layout === 'vertical' ? dimensions : measures,
     chartConfig.margin,
     false,
     dimensions.length > 1,
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 3078b0f7903..0eb889163a0 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -163,8 +163,6 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
   const marginChart = useChartMargin(
     dataset,
     measures,
-    primaryDimension?.formatter ?? ((d) => d),
-    primaryDimensionAccessor,
     chartConfig.margin,
     false,
     dimensions.length > 1,
diff --git a/packages/charts/src/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
index a228e4150a4..0149dbbf269 100644
--- a/packages/charts/src/hooks/useChartMargin.ts
+++ b/packages/charts/src/hooks/useChartMargin.ts
@@ -1,48 +1,27 @@
 import { useMemo } from 'react';
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
-import { getTextWidth } from '../util/Utils';
+import { getTextWidth, truncateLongLabel } from '../util/Utils';
 
-export const useChartMargin = (
-  dataset,
-  measures,
-  formatter,
-  labelKey,
-  margin,
-  isBar?,
-  hasSecondaryDimension?,
-  hasZoomingTool?
-) =>
+export const useChartMargin = (dataset: unknown[], elements, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
   useMemo(() => {
     let marginLeft = 0;
-    if (dataset && typeof margin?.left !== 'number') {
-      if (isBar) {
-        marginLeft = Math.max(
-          ...dataset
-            .map((data) => formatter(getValueByDataKey(data, labelKey, '')).split(' '))
-            .flat()
-            .map(getTextWidth)
-        );
-      } else {
-        marginLeft = getTextWidth(
-          Math.max(
-            ...dataset.map((item) => {
-              return Math.max(...measures.map((measure) => item[measure.accessor]));
-            })
+    const primaryElement = elements[0];
+    if (dataset instanceof Array && primaryElement) {
+      marginLeft = Math.max(
+        ...dataset
+          .map((item) =>
+            elements.map((elementConfig) =>
+              truncateLongLabel(primaryElement.formatter(getValueByDataKey(item, elementConfig.accessor, '')))
+            )
           )
-        );
-      }
+          .flat()
+          .map(getTextWidth)
+      );
     }
     return {
       right: margin?.right ?? 60,
       top: margin?.top ?? hasZoomingTool ? 40 : 10,
       bottom: margin?.bottom ?? (!isBar && hasSecondaryDimension) ? 100 : 30,
-      left:
-        margin?.left ?? isBar
-          ? hasSecondaryDimension
-            ? marginLeft
-            : marginLeft / 2
-          : hasSecondaryDimension
-          ? marginLeft / 2
-          : marginLeft / 2
+      left: margin?.left ?? (isBar && hasSecondaryDimension) ? marginLeft : marginLeft / 2
     };
-  }, [dataset, labelKey, margin]);
+  }, [dataset, elements, margin, hasSecondaryDimension, hasZoomingTool]);
diff --git a/packages/charts/src/internal/YAxisTicks.tsx b/packages/charts/src/internal/YAxisTicks.tsx
index ec6da6dda90..d708022a1f7 100644
--- a/packages/charts/src/internal/YAxisTicks.tsx
+++ b/packages/charts/src/internal/YAxisTicks.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import { truncateLongLabel } from '../util/Utils';
 
 export const YAxisTicks = (props) => {
   const { x, y, payload, config } = props;
   const formattedValue = config.formatter(payload.value);
-  const tickValue = formattedValue.length > 10 ? `${formattedValue.slice(0, 13)}...` : formattedValue;
+  const tickValue = truncateLongLabel(formattedValue);
   return (
     <g transform={`translate(${x},${y + 3})`}>
       <text fill={ThemingParameters.sapContent_LabelColor} textAnchor={'end'}>
diff --git a/packages/charts/src/util/Utils.ts b/packages/charts/src/util/Utils.ts
index 0e87c410e5a..788d45443a9 100644
--- a/packages/charts/src/util/Utils.ts
+++ b/packages/charts/src/util/Utils.ts
@@ -67,3 +67,10 @@ export const getTextHeight = (text = 'M', font = `normal ${defaultFont.size}pt $
   const metrics = context.measureText(text); // should be around 90% accurate...
   return textHeight || (textHeight = metrics.width);
 };
+
+export const truncateLongLabel = (value: string, length = 13) => {
+  if (value.length > length) {
+    return `${value.slice(0, length)}...`;
+  }
+  return value;
+};

From ca7e3cce8073e44cf4e0a0e137de21b86553967a Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 09:00:16 +0200
Subject: [PATCH 20/30] fix build

---
 packages/charts/rollup.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/charts/rollup.config.js b/packages/charts/rollup.config.js
index 3ab446e85eb..279a02632b7 100644
--- a/packages/charts/rollup.config.js
+++ b/packages/charts/rollup.config.js
@@ -1,4 +1,4 @@
 const rollupConfigFactory = require('../../shared/rollup/configFactory');
 
-const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base']);
+const config = rollupConfigFactory('charts', ['@ui5/webcomponents', '@ui5/webcomponents-base', 'lodash', 'classnames']);
 module.exports = config;

From c4eaba651047d5a274ff4c2e115c7aeeb414f783 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 10:11:11 +0200
Subject: [PATCH 21/30] improve bundle size

---
 packages/charts/src/components/BarChart/BarChart.tsx   |  6 +++---
 packages/charts/src/components/BarChart/index.tsx      |  9 ++-------
 .../charts/src/components/ColumnChart/ColumnChart.tsx  |  6 +++---
 packages/charts/src/components/ColumnChart/index.tsx   | 10 ++--------
 packages/charts/src/components/ComposedChart/index.tsx |  6 +++---
 packages/charts/src/components/DonutChart/index.tsx    |  2 +-
 packages/charts/src/components/LineChart/LineChart.tsx |  6 +++---
 packages/charts/src/components/LineChart/index.tsx     |  2 +-
 packages/charts/src/components/PieChart/index.tsx      |  2 +-
 .../charts/src/components/RadarChart/RadarChart.tsx    |  2 +-
 packages/charts/src/components/RadarChart/index.tsx    |  2 +-
 packages/charts/src/components/RadialChart/index.tsx   |  2 +-
 packages/charts/src/lib/components/ChartDataLabel.ts   |  3 +++
 packages/charts/src/lib/components/XAxisTicks.ts       |  3 +++
 packages/charts/src/lib/components/YAxisTicks.ts       |  3 +++
 15 files changed, 31 insertions(+), 33 deletions(-)
 create mode 100644 packages/charts/src/lib/components/ChartDataLabel.ts
 create mode 100644 packages/charts/src/lib/components/XAxisTicks.ts
 create mode 100644 packages/charts/src/lib/components/YAxisTicks.ts

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index eb3de693b85..5faa12e818a 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -23,9 +23,9 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { ChartDataLabel } from '../../internal/ChartDataLabel';
-import { XAxisTicks } from '../../internal/XAxisTicks';
-import { YAxisTicks } from '../../internal/YAxisTicks';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
 const formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
diff --git a/packages/charts/src/components/BarChart/index.tsx b/packages/charts/src/components/BarChart/index.tsx
index caa759c77e8..cba38659082 100644
--- a/packages/charts/src/components/BarChart/index.tsx
+++ b/packages/charts/src/components/BarChart/index.tsx
@@ -11,13 +11,8 @@ import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import {
-  formatAxisCallback,
-  formatDataLabel,
-  formatTooltipLabel,
-  getTextWidth,
-  useMergedConfig
-} from '../../util/Utils';
+import { getTextWidth } from '../../util/Utils';
+import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { BarChartPlaceholder } from './Placeholder';
 
 export interface BarChartPropTypes extends ChartBaseProps {}
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index 991178aa5ba..07c3a3f598f 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -23,9 +23,9 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { ChartDataLabel } from '../../internal/ChartDataLabel';
-import { XAxisTicks } from '../../internal/XAxisTicks';
-import { YAxisTicks } from '../../internal/YAxisTicks';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
diff --git a/packages/charts/src/components/ColumnChart/index.tsx b/packages/charts/src/components/ColumnChart/index.tsx
index 0fd4e555200..438b25e7af0 100644
--- a/packages/charts/src/components/ColumnChart/index.tsx
+++ b/packages/charts/src/components/ColumnChart/index.tsx
@@ -11,14 +11,8 @@ import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import {
-  formatAxisCallback,
-  formatDataLabel,
-  formatTooltipLabel,
-  getTextHeight,
-  getTextWidth,
-  useMergedConfig
-} from '../../util/Utils';
+import { getTextHeight, getTextWidth } from '../../util/Utils';
+import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { ColumnChartPlaceholder } from './Placeholder';
 
 export interface ColumnChartPropTypes extends ChartBaseProps {}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 2b1e7d2a6fd..ed559c1ff53 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -25,9 +25,9 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { ChartDataLabel } from '../../internal/ChartDataLabel';
-import { XAxisTicks } from '../../internal/XAxisTicks';
-import { YAxisTicks } from '../../internal/YAxisTicks';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
 const dimensionDefaults = {
   formatter: (d) => d
diff --git a/packages/charts/src/components/DonutChart/index.tsx b/packages/charts/src/components/DonutChart/index.tsx
index e97556d2fcf..3d371f41442 100644
--- a/packages/charts/src/components/DonutChart/index.tsx
+++ b/packages/charts/src/components/DonutChart/index.tsx
@@ -9,7 +9,7 @@ import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLeg
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatDataLabel, formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/Utils';
+import { formatDataLabel, formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils_deprecated';
 import { PieChartPlaceholder } from '../PieChart/Placeholder';
 
 export interface DonutChartPropTypes extends ChartBaseProps {}
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 0eb889163a0..c1f94798ec9 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -23,9 +23,9 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { ChartDataLabel } from '../../internal/ChartDataLabel';
-import { XAxisTicks } from '../../internal/XAxisTicks';
-import { YAxisTicks } from '../../internal/YAxisTicks';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
 interface MeasureConfig extends IChartMeasure {
   /**
diff --git a/packages/charts/src/components/LineChart/index.tsx b/packages/charts/src/components/LineChart/index.tsx
index b53add2591a..a07a80acede 100644
--- a/packages/charts/src/components/LineChart/index.tsx
+++ b/packages/charts/src/components/LineChart/index.tsx
@@ -9,7 +9,7 @@ import { InternalProps } from '../../interfaces/InternalProps';
 import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/Utils';
+import { formatAxisCallback, formatDataLabel, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 import { LineChartPlaceholder } from './Placeholder';
 
 export interface LineChartPropTypes extends ChartBaseProps {}
diff --git a/packages/charts/src/components/PieChart/index.tsx b/packages/charts/src/components/PieChart/index.tsx
index 418f827c85a..8114a1367f0 100644
--- a/packages/charts/src/components/PieChart/index.tsx
+++ b/packages/charts/src/components/PieChart/index.tsx
@@ -9,7 +9,7 @@ import { useLegend, usePieLegendItemClickHandler } from '../../internal/ChartLeg
 import { getCssVariableValue } from '../../themes/Utils';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/Utils';
+import { formatTooltipLabelForPieCharts, useMergedConfig } from '../../util/utils_deprecated';
 import { PieChartPlaceholder } from './Placeholder';
 
 export interface PieChartPropTypes extends ChartBaseProps {}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 52f85fa646c..5f10558bf2f 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -19,7 +19,7 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { ChartDataLabel } from '../../internal/ChartDataLabel';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
 
 interface MeasureConfig extends IChartMeasure {
   /**
diff --git a/packages/charts/src/components/RadarChart/index.tsx b/packages/charts/src/components/RadarChart/index.tsx
index 3b2e609fdc8..b653847089e 100644
--- a/packages/charts/src/components/RadarChart/index.tsx
+++ b/packages/charts/src/components/RadarChart/index.tsx
@@ -8,7 +8,7 @@ import { InternalProps } from '../../interfaces/InternalProps';
 import { useLegend, useLegendItemClickHandler } from '../../internal/ChartLegend';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
 import { useChartData } from '../../util/populateData';
-import { formatAxisCallback, formatTooltipLabel, useMergedConfig } from '../../util/Utils';
+import { formatAxisCallback, formatTooltipLabel, useMergedConfig } from '../../util/utils_deprecated';
 
 export interface RadarChartPropTypes extends ChartBaseProps {}
 
diff --git a/packages/charts/src/components/RadialChart/index.tsx b/packages/charts/src/components/RadialChart/index.tsx
index a22143f171c..e60145f7c23 100644
--- a/packages/charts/src/components/RadialChart/index.tsx
+++ b/packages/charts/src/components/RadialChart/index.tsx
@@ -5,7 +5,7 @@ import React, { CSSProperties, FC, forwardRef, Ref, useMemo } from 'react';
 import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { ChartBaseDefaultProps } from '../../util/ChartBaseDefaultProps';
-import { useMergedConfig } from '../../util/Utils';
+import { useMergedConfig } from '../../util/utils_deprecated';
 import { DonutChart } from '../DonutChart';
 
 export interface RadialChartPropTypes extends CommonProps {
diff --git a/packages/charts/src/lib/components/ChartDataLabel.ts b/packages/charts/src/lib/components/ChartDataLabel.ts
new file mode 100644
index 00000000000..dbfe04f1f9a
--- /dev/null
+++ b/packages/charts/src/lib/components/ChartDataLabel.ts
@@ -0,0 +1,3 @@
+import { ChartDataLabel } from '../../internal/ChartDataLabel';
+
+export { ChartDataLabel };
diff --git a/packages/charts/src/lib/components/XAxisTicks.ts b/packages/charts/src/lib/components/XAxisTicks.ts
new file mode 100644
index 00000000000..7942941b0c1
--- /dev/null
+++ b/packages/charts/src/lib/components/XAxisTicks.ts
@@ -0,0 +1,3 @@
+import { XAxisTicks } from '../../internal/XAxisTicks';
+
+export { XAxisTicks };
diff --git a/packages/charts/src/lib/components/YAxisTicks.ts b/packages/charts/src/lib/components/YAxisTicks.ts
new file mode 100644
index 00000000000..19feef1c2cd
--- /dev/null
+++ b/packages/charts/src/lib/components/YAxisTicks.ts
@@ -0,0 +1,3 @@
+import { YAxisTicks } from '../../internal/YAxisTicks';
+
+export { YAxisTicks };

From 7954d8c8e58ee91a98d5b39bc8e931b947ea0ffb Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 10:11:26 +0200
Subject: [PATCH 22/30] adjust size of loading placeholders

---
 .../src/components/BarChart/Placeholder.tsx   |  6 ++-
 .../components/ColumnChart/Placeholder.tsx    |  6 ++-
 .../src/components/LineChart/Placeholder.tsx  | 13 +++--
 .../src/components/PieChart/Placeholder.tsx   |  6 ++-
 packages/charts/src/util/Utils.ts             | 52 +------------------
 packages/charts/src/util/utils_deprecated.ts  | 42 +++++++++++++++
 6 files changed, 64 insertions(+), 61 deletions(-)
 create mode 100644 packages/charts/src/util/utils_deprecated.ts

diff --git a/packages/charts/src/components/BarChart/Placeholder.tsx b/packages/charts/src/components/BarChart/Placeholder.tsx
index 527c895ae62..dfa26336b3a 100644
--- a/packages/charts/src/components/BarChart/Placeholder.tsx
+++ b/packages/charts/src/components/BarChart/Placeholder.tsx
@@ -5,8 +5,10 @@ import ContentLoader from 'react-content-loader';
 export const BarChartPlaceholder = () => {
   return (
     <ContentLoader
-      height={145}
-      width={165}
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
       speed={2}
       backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
       foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
diff --git a/packages/charts/src/components/ColumnChart/Placeholder.tsx b/packages/charts/src/components/ColumnChart/Placeholder.tsx
index 0da0584ad66..a6d85108abd 100644
--- a/packages/charts/src/components/ColumnChart/Placeholder.tsx
+++ b/packages/charts/src/components/ColumnChart/Placeholder.tsx
@@ -5,8 +5,10 @@ import ContentLoader from 'react-content-loader';
 export const ColumnChartPlaceholder = (props) => {
   return (
     <ContentLoader
-      height={145}
-      width={165}
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
       speed={2}
       backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
       foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
diff --git a/packages/charts/src/components/LineChart/Placeholder.tsx b/packages/charts/src/components/LineChart/Placeholder.tsx
index 88f9848d44f..6eacd4cd42d 100644
--- a/packages/charts/src/components/LineChart/Placeholder.tsx
+++ b/packages/charts/src/components/LineChart/Placeholder.tsx
@@ -5,18 +5,21 @@ import ContentLoader from 'react-content-loader';
 export const LineChartPlaceholder = (props) => {
   return (
     <ContentLoader
-      height={300}
-      width={300}
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
       speed={2}
       backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
       foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
       backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
       {...props}
     >
+      <rect x="10" y="135" width="135" height="1" />
       <path
-        d="M30 260 L60 190 L90 150 L120 90 L150 140 L180 110 L210 80 L240 150 L270 130 L270 135 L240 155 L210 85 L180 115 L150 145 L120 95 L90 155 L60 195 L30 265 Z"
-        fill="transparent"
-        strokeWidth="5"
+        d="M20 135 L40 80 L60 70 L80 30 L100 50 L120 65 L 135 100 L120 67 L100 52 L80 32 L60 72 L40 82 L20 137 Z"
+        fill="none"
+        strokeWidth="2"
       />
     </ContentLoader>
   );
diff --git a/packages/charts/src/components/PieChart/Placeholder.tsx b/packages/charts/src/components/PieChart/Placeholder.tsx
index a45c4563ce9..1f43758ef83 100644
--- a/packages/charts/src/components/PieChart/Placeholder.tsx
+++ b/packages/charts/src/components/PieChart/Placeholder.tsx
@@ -5,8 +5,10 @@ import ContentLoader from 'react-content-loader';
 export const PieChartPlaceholder = (props) => {
   return (
     <ContentLoader
-      height={150}
-      width={150}
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
       speed={2}
       backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
       foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
diff --git a/packages/charts/src/util/Utils.ts b/packages/charts/src/util/Utils.ts
index 788d45443a9..e148a0ae2cf 100644
--- a/packages/charts/src/util/Utils.ts
+++ b/packages/charts/src/util/Utils.ts
@@ -1,56 +1,8 @@
-import merge from 'lodash.merge';
-import { useMemo } from 'react';
-import { defaultFont } from '../config';
-
-export const useMergedConfig = (x, y) => {
-  return useMemo(() => {
-    return merge(x, y);
-  }, [x, y]);
-};
-
-// this needs to be a function as we need the `this` of the chart;
-export const formatAxisCallback = (formatter) =>
-  function (value) {
-    // @ts-ignore
-    const currentDataset = this.chart.data.datasets[0];
-    return formatter(value, currentDataset);
-  };
-
-export const formatDataLabel = (formatter) => (val, context) => {
-  return formatter(val, context.dataset, context);
-};
-
-export const formatTooltipLabel = (categoryFormatter, valueFormatter, valueAccessor = 'yLabel') => (
-  tooltipItem,
-  data
-): string => {
-  const currentDataset = data.datasets[tooltipItem.datasetIndex];
-  let label = categoryFormatter(currentDataset.label, currentDataset, tooltipItem) || '';
-
-  if (label) {
-    label += ': ';
-  }
-
-  label += valueFormatter(tooltipItem[valueAccessor], currentDataset, tooltipItem);
-  return label;
-};
-
-export const formatTooltipLabelForPieCharts = (categoryFormatter, valueFormatter) => (tooltipItem, data): string => {
-  const currentDataset = data.datasets[tooltipItem.datasetIndex];
-  let label = categoryFormatter(data.labels[tooltipItem.index], currentDataset, tooltipItem) || '';
-
-  if (label) {
-    label += ': ';
-  }
-  label += valueFormatter(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index], currentDataset, tooltipItem);
-  return label;
-};
-
 let canvas;
 let textHeight;
 
 export const getTextWidth = (text) => {
-  const font = `normal ${defaultFont.size}pt ${defaultFont.family}`;
+  const font = `normal 12pt "72","72full",Arial,Helvetica,sans-serif`;
   // re-use canvas object for better performance
   canvas = canvas || (canvas = document.createElement('canvas'));
   const context = canvas.getContext('2d');
@@ -59,7 +11,7 @@ export const getTextWidth = (text) => {
   return metrics.width;
 };
 
-export const getTextHeight = (text = 'M', font = `normal ${defaultFont.size}pt ${defaultFont.family}`) => {
+export const getTextHeight = (text = 'M', font = `normal 12pt "72","72full",Arial,Helvetica,sans-serif`) => {
   // re-use canvas object for better performance
   canvas = canvas || (canvas = document.createElement('canvas'));
   const context = canvas.getContext('2d');
diff --git a/packages/charts/src/util/utils_deprecated.ts b/packages/charts/src/util/utils_deprecated.ts
new file mode 100644
index 00000000000..4fd93ffb437
--- /dev/null
+++ b/packages/charts/src/util/utils_deprecated.ts
@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import merge from 'lodash.merge';
+
+export const useMergedConfig = (x, y) => {
+  return useMemo(() => {
+    return merge(x, y);
+  }, [x, y]);
+};
+// this needs to be a function as we need the `this` of the chart;
+export const formatAxisCallback = (formatter) =>
+  function (value) {
+    // @ts-ignore
+    const currentDataset = this.chart.data.datasets[0];
+    return formatter(value, currentDataset);
+  };
+export const formatDataLabel = (formatter) => (val, context) => {
+  return formatter(val, context.dataset, context);
+};
+export const formatTooltipLabel = (categoryFormatter, valueFormatter, valueAccessor = 'yLabel') => (
+  tooltipItem,
+  data
+): string => {
+  const currentDataset = data.datasets[tooltipItem.datasetIndex];
+  let label = categoryFormatter(currentDataset.label, currentDataset, tooltipItem) || '';
+
+  if (label) {
+    label += ': ';
+  }
+
+  label += valueFormatter(tooltipItem[valueAccessor], currentDataset, tooltipItem);
+  return label;
+};
+export const formatTooltipLabelForPieCharts = (categoryFormatter, valueFormatter) => (tooltipItem, data): string => {
+  const currentDataset = data.datasets[tooltipItem.datasetIndex];
+  let label = categoryFormatter(data.labels[tooltipItem.index], currentDataset, tooltipItem) || '';
+
+  if (label) {
+    label += ': ';
+  }
+  label += valueFormatter(data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index], currentDataset, tooltipItem);
+  return label;
+};

From fbdd4a7fe82379c59a02e6eb38bc93905bd75cb1 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Tue, 28 Apr 2020 11:33:14 +0200
Subject: [PATCH 23/30] fix(snapshot tests of charts)

---
 .../__snapshots__/BarChart.test.tsx.snap      |  6 +-
 .../__snapshots__/BarRechart.test.tsx.snap    |  6 +-
 .../__snapshots__/ColumnChart.test.tsx.snap   |  6 +-
 .../__snapshots__/ColumnRechart.test.tsx.snap |  6 +-
 .../__snapshots__/ComposedChart.test.tsx.snap |  6 +-
 .../__snapshots__/DonutChart.test.tsx.snap    | 85 ++++++-------------
 .../__snapshots__/DonutRechart.test.tsx.snap  |  6 +-
 .../__snapshots__/LineChart.test.tsx.snap     | 18 ++--
 .../__snapshots__/LineRechart.test.tsx.snap   | 18 ++--
 .../__snapshots__/PieChart.test.tsx.snap      | 85 ++++++-------------
 .../__snapshots__/PieRechart.test.tsx.snap    |  6 +-
 .../__snapshots__/RadarChart.test.tsx.snap    | 25 ++----
 .../__snapshots__/RadarRechart.test.tsx.snap  |  6 +-
 13 files changed, 116 insertions(+), 163 deletions(-)

diff --git a/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap b/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap
index 21b74f8c00a..eb080d23590 100644
--- a/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap
+++ b/packages/charts/src/components/BarChart/__snapshots__/BarChart.test.tsx.snap
@@ -7,9 +7,11 @@ exports[`BarChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="145"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="165"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap b/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
index 1f17f06f276..c3cc4503d3b 100644
--- a/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
+++ b/packages/charts/src/components/BarChart/__snapshots__/BarRechart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`BarRechart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="145"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="165"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap
index fcbd3601f2d..d4941c44a4f 100644
--- a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap
+++ b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnChart.test.tsx.snap
@@ -48,9 +48,11 @@ exports[`ColumnChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="145"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="165"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
index c916c87fa48..fea4704d7db 100644
--- a/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
+++ b/packages/charts/src/components/ColumnChart/__snapshots__/ColumnRechart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`ColumnRechart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="145"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="165"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap b/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
index d36bea1a17e..2a93279ea19 100644
--- a/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
+++ b/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`ComposedChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="145"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="165"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap b/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
index 53c568bd8b2..e0f1a47e63b 100644
--- a/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
+++ b/packages/charts/src/components/DonutChart/__snapshots__/DonutChart.test.tsx.snap
@@ -18,65 +18,28 @@ exports[`DonutChart Renders with data 1`] = `
   <div
     class="legend"
   >
-    <li
-      data-datasetindex="0"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
+    <ul
+      class="0-legend"
     >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #0f828f; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
-        Dataset 1
-      </ui5-label>
-      
-
-    </li>
-     
-    <li
-      data-datasetindex="1"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
-    >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #5ac2ce; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
-        Dataset 1
-      </ui5-label>
-      
-
-    </li>
-     
-    <li
-      data-datasetindex="2"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
-    >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #03734d; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
-        Dataset 1
-      </ui5-label>
-      
-
-    </li>
+      <li>
+        <span
+          style="background-color: rgb(15, 130, 143);"
+        />
+        Label 1
+      </li>
+      <li>
+        <span
+          style="background-color: rgb(90, 194, 206);"
+        />
+        Label 2
+      </li>
+      <li>
+        <span
+          style="background-color: rgb(3, 115, 77);"
+        />
+        Label 3
+      </li>
+    </ul>
   </div>
 </div>
 `;
@@ -88,9 +51,11 @@ exports[`DonutChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="150"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="150"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap b/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap
index 2f4b90f59f5..873089a21af 100644
--- a/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap
+++ b/packages/charts/src/components/DonutChart/__snapshots__/DonutRechart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`DonutChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="150"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="150"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 5915f77a75b..c140f021429 100644
--- a/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/charts/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -60,9 +60,11 @@ exports[`LineChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="300"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="300"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
@@ -84,10 +86,16 @@ exports[`LineChart loading placeholder 1`] = `
       <clipPath
         id="CLIP-PATH-URL"
       >
+        <rect
+          height="1"
+          width="135"
+          x="10"
+          y="135"
+        />
         <path
-          d="M30 260 L60 190 L90 150 L120 90 L150 140 L180 110 L210 80 L240 150 L270 130 L270 135 L240 155 L210 85 L180 115 L150 145 L120 95 L90 155 L60 195 L30 265 Z"
-          fill="transparent"
-          stroke-width="5"
+          d="M20 135 L40 80 L60 70 L80 30 L100 50 L120 65 L 135 100 L120 67 L100 52 L80 32 L60 72 L40 82 L20 137 Z"
+          fill="none"
+          stroke-width="2"
         />
       </clipPath>
       <linearGradient
diff --git a/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap b/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap
index a966e1dc115..525cb77763c 100644
--- a/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap
+++ b/packages/charts/src/components/LineChart/__snapshots__/LineRechart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`LineChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="300"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="300"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
@@ -44,10 +46,16 @@ exports[`LineChart loading placeholder 1`] = `
       <clipPath
         id="CLIP-PATH-URL"
       >
+        <rect
+          height="1"
+          width="135"
+          x="10"
+          y="135"
+        />
         <path
-          d="M30 260 L60 190 L90 150 L120 90 L150 140 L180 110 L210 80 L240 150 L270 130 L270 135 L240 155 L210 85 L180 115 L150 145 L120 95 L90 155 L60 195 L30 265 Z"
-          fill="transparent"
-          stroke-width="5"
+          d="M20 135 L40 80 L60 70 L80 30 L100 50 L120 65 L 135 100 L120 67 L100 52 L80 32 L60 72 L40 82 L20 137 Z"
+          fill="none"
+          stroke-width="2"
         />
       </clipPath>
       <linearGradient
diff --git a/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap b/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
index 878a8043dc3..7f445097c5c 100644
--- a/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
+++ b/packages/charts/src/components/PieChart/__snapshots__/PieChart.test.tsx.snap
@@ -18,65 +18,28 @@ exports[`PieChart Renders with data 1`] = `
   <div
     class="legend"
   >
-    <li
-      data-datasetindex="0"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
+    <ul
+      class="0-legend"
     >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #0f828f; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
-        Dataset 1
-      </ui5-label>
-      
-
-    </li>
-     
-    <li
-      data-datasetindex="1"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
-    >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #5ac2ce; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
-        Dataset 1
-      </ui5-label>
-      
-
-    </li>
-     
-    <li
-      data-datasetindex="2"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
-    >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #03734d; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
-        Dataset 1
-      </ui5-label>
-      
-
-    </li>
+      <li>
+        <span
+          style="background-color: rgb(15, 130, 143);"
+        />
+        Label 1
+      </li>
+      <li>
+        <span
+          style="background-color: rgb(90, 194, 206);"
+        />
+        Label 2
+      </li>
+      <li>
+        <span
+          style="background-color: rgb(3, 115, 77);"
+        />
+        Label 3
+      </li>
+    </ul>
   </div>
 </div>
 `;
@@ -88,9 +51,11 @@ exports[`PieChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="150"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="150"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap b/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap
index be11bde9c41..50e6e9050cd 100644
--- a/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap
+++ b/packages/charts/src/components/PieChart/__snapshots__/PieRechart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`PieChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="150"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="150"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"
diff --git a/packages/charts/src/components/RadarChart/__snapshots__/RadarChart.test.tsx.snap b/packages/charts/src/components/RadarChart/__snapshots__/RadarChart.test.tsx.snap
index 93e6e8172f2..7cc74281576 100644
--- a/packages/charts/src/components/RadarChart/__snapshots__/RadarChart.test.tsx.snap
+++ b/packages/charts/src/components/RadarChart/__snapshots__/RadarChart.test.tsx.snap
@@ -18,25 +18,16 @@ exports[`RadarChart Renders with data 1`] = `
   <div
     class="legend"
   >
-    <li
-      data-datasetindex="0"
-      style="display: flex; align-items: center; margin-right: 24px; cursor:pointer;"
+    <ul
+      class="0-legend"
     >
-      
-
-      <div
-        style="width: 14px; height: 14px; border-radius: 2px; background-color: #0f828f; margin-right: 8px"
-      />
-      
-
-      <ui5-label
-        style="font-size: 12px; user-select: none; cursor:pointer;"
-      >
+      <li>
+        <span
+          style="background-color: rgb(15, 130, 143);"
+        />
         Dataset 1
-      </ui5-label>
-      
-
-    </li>
+      </li>
+    </ul>
   </div>
 </div>
 `;
diff --git a/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap b/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap
index 819d5eb8ae9..a020701d119 100644
--- a/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap
+++ b/packages/charts/src/components/RadarChart/__snapshots__/RadarRechart.test.tsx.snap
@@ -20,9 +20,11 @@ exports[`RadarChart loading placeholder 1`] = `
 >
   <svg
     aria-labelledby="ARIA-LABELLED-BY"
-    height="150"
+    height="100%"
+    preserveAspectRatio="xMidYMid meet"
     role="img"
-    width="150"
+    viewBox="0 0 165 145"
+    width="100%"
   >
     <title
       id="TITLE_ARIA_ID"

From 88d8c23a97f4b6e0492ed9bbbc9e55b71d622371 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 11:54:53 +0200
Subject: [PATCH 24/30] feat: add composed chart placeholder

---
 .../ComposedChart/ComposedChart.stories.tsx   | 43 +++++++++++
 .../components/ComposedChart/Placeholder.tsx  | 71 +++++++++++++++++++
 .../src/components/ComposedChart/index.tsx    | 14 ++--
 .../components/ComposedChartPlaceholder.ts    |  3 +
 4 files changed, 126 insertions(+), 5 deletions(-)
 create mode 100644 packages/charts/src/components/ComposedChart/Placeholder.tsx
 create mode 100644 packages/charts/src/lib/components/ComposedChartPlaceholder.ts

diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
index e0f189312a6..1583ff61f32 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -197,3 +197,46 @@ export const withReferenceLineStory = () => {
 withReferenceLineStory.story = {
   name: 'With reference line'
 };
+
+export const loadingPlaceholder = () => {
+  return (
+    <ComposedChart
+      loading={boolean('loading', true)}
+      onDataPointClick={action('onDataPointClick')}
+      onLegendClick={action('onLegendClick')}
+      dataset={[]}
+      style={{ height: '60vh' }}
+      layout={select('layout', ['horizontal', 'vertical'], 'horizontal')}
+      dimensions={[
+        {
+          accessor: 'name',
+          formatter: (d) => `${d} 2019`,
+          interval: 0
+        }
+      ]}
+      measures={[
+        {
+          accessor: 'sessions',
+          label: 'Active Sessions',
+          type: 'bar'
+        },
+        {
+          accessor: 'users',
+          label: 'Users',
+          formatter: (val) => val.toLocaleString(),
+          type: 'area'
+        },
+        {
+          accessor: 'volume',
+          label: 'Vol.',
+          formatter: (val) => `${val} sessions`,
+          type: 'line'
+        }
+      ]}
+    />
+  );
+};
+
+loadingPlaceholder.story = {
+  name: 'with Loading Placeholder'
+};
diff --git a/packages/charts/src/components/ComposedChart/Placeholder.tsx b/packages/charts/src/components/ComposedChart/Placeholder.tsx
new file mode 100644
index 00000000000..077c4516fa1
--- /dev/null
+++ b/packages/charts/src/components/ComposedChart/Placeholder.tsx
@@ -0,0 +1,71 @@
+import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+
+const barContentVertical = (
+  <>
+    <rect x="20" y="20" width="85" height="15" />
+    <rect x="20" y="40" width="117" height="15" />
+    <rect x="20" y="60" width="67" height="15" />
+    <rect x="20" y="80" width="75" height="15" />
+    <rect x="20" y="100" width="125" height="15" />
+    <rect x="20" y="120" width="60" height="15" />
+  </>
+);
+
+const barContentHorizontal = (
+  <>
+    <rect x="20" y="50" width="15" height="85" />
+    <rect x="40" y="18" width="15" height="117" />
+    <rect x="60" y="68" width="15" height="67" />
+    <rect x="80" y="60" width="15" height="75" />
+    <rect x="100" y="10" width="15" height="125" />
+    <rect x="120" y="75" width="15" height="60" />
+  </>
+);
+
+const lineContentVertical = (
+  <>
+    <path
+      d="M20 20 L75 40 L85 60 L125 80 L105 100 L90 120 L55 135 L92 120 L107 100 L127 80 L87 60 L77 40 L22 20 Z"
+      fill="none"
+      strokeWidth="2"
+    />
+  </>
+);
+
+const lineContentHorizontal = (
+  <>
+    <path
+      d="M20 135 L40 80 L60 70 L80 30 L100 50 L120 65 L135 100 L120 67 L100 52 L80 32 L60 72 L40 82 L20 137 Z"
+      fill="none"
+      strokeWidth="2"
+    />
+  </>
+);
+
+export const ComposedChartPlaceholder = ({ layout, measures }) => {
+  const distinctElements = new Set(measures.map((item) => item.type));
+
+  return (
+    <ContentLoader
+      viewBox="0 0 165 145"
+      preserveAspectRatio="xMidYMid meet"
+      width="100%"
+      height="100%"
+      speed={2}
+      backgroundColor={ThemingParameters.sapContent_ImagePlaceholderBackground}
+      foregroundColor={ThemingParameters.sapContent_ImagePlaceholderForegroundColor}
+      backgroundOpacity={ThemingParameters.sapContent_DisabledOpacity as any}
+    >
+      {layout === 'vertical' && <rect x="20" y="10" width="1" height="135" />}
+      {layout === 'horizontal' && <rect x="10" y="135" width="135" height="1" />}
+      {layout === 'vertical' && distinctElements.has('bar') && barContentVertical}
+      {layout === 'horizontal' && distinctElements.has('bar') && barContentHorizontal}
+      {layout === 'vertical' && (distinctElements.has('line') || distinctElements.has('area')) && lineContentVertical}
+      {layout === 'horizontal' &&
+        (distinctElements.has('line') || distinctElements.has('area')) &&
+        lineContentHorizontal}
+    </ContentLoader>
+  );
+};
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index ed559c1ff53..3de53213b37 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -1,7 +1,10 @@
 import { ThemingParameters } from '@ui5/webcomponents-react-base/lib/ThemingParameters';
 import { useConsolidatedRef } from '@ui5/webcomponents-react-base/lib/useConsolidatedRef';
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base/lib/Utils';
-import { LineChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/LineChartPlaceholder';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
+import { ComposedChartPlaceholder } from '@ui5/webcomponents-react-charts/lib/components/ComposedChartPlaceholder';
+import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
+import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 import { ChartContainer } from '@ui5/webcomponents-react-charts/lib/next/ChartContainer';
 import { useLegendItemClick } from '@ui5/webcomponents-react-charts/lib/useLegendItemClick';
 import React, { FC, forwardRef, Ref, useCallback, useMemo } from 'react';
@@ -25,9 +28,6 @@ import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
 import { IChartMeasure } from '../../interfaces/IChartMeasure';
 import { RechartBaseProps } from '../../interfaces/RechartBaseProps';
-import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
-import { XAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/XAxisTicks';
-import { YAxisTicks } from '@ui5/webcomponents-react-charts/lib/components/YAxisTicks';
 
 const dimensionDefaults = {
   formatter: (d) => d
@@ -233,12 +233,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     interval: 0
   };
 
+  const Placeholder = useCallback(() => {
+    return <ComposedChartPlaceholder layout={layout} measures={measures} />;
+  }, [layout, measures]);
+
   return (
     <ChartContainer
       ref={chartRef}
       loading={loading}
       dataset={dataset}
-      Placeholder={LineChartPlaceholder}
+      Placeholder={Placeholder}
       style={style}
       className={className}
       tooltip={tooltip}
diff --git a/packages/charts/src/lib/components/ComposedChartPlaceholder.ts b/packages/charts/src/lib/components/ComposedChartPlaceholder.ts
new file mode 100644
index 00000000000..ca2f880d245
--- /dev/null
+++ b/packages/charts/src/lib/components/ComposedChartPlaceholder.ts
@@ -0,0 +1,3 @@
+import { ComposedChartPlaceholder } from '../../components/ComposedChart/Placeholder';
+
+export { ComposedChartPlaceholder };

From ec5558d149f3a8d0984c013af4c7b228abbc9a6a Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 11:57:45 +0200
Subject: [PATCH 25/30] Update jest.config.js

---
 config/jest.config.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/config/jest.config.js b/config/jest.config.js
index e18b17d7f70..0f8f49895bd 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -21,7 +21,8 @@ module.exports = {
     '!packages/base/src/styling/HSLColor.ts', // no deprecated HSL Util
     '!packages/base/src/styling/font72.ts', // no deprecated font
     '!packages/base/src/Scroller/*', // no scroll lib as it is not longer used
-    '!packages/base/src/utils/Event.ts' // event is deprecated
+    '!packages/base/src/utils/Event.ts', // event is deprecated
+    '!packages/charts/src/internal/ChartLabel.tsx' // temp copy of recharts label
   ],
   setupFiles: ['jest-canvas-mock'],
   setupFilesAfterEnv: ['./config/jestsetup.ts'],

From dbc251dad2a579879936642af701463dfab713e5 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 12:09:08 +0200
Subject: [PATCH 26/30] exlude lib sub directories from coverage

---
 config/jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/jest.config.js b/config/jest.config.js
index 0f8f49895bd..948fcde2f16 100644
--- a/config/jest.config.js
+++ b/config/jest.config.js
@@ -7,7 +7,7 @@ module.exports = {
   collectCoverage: false,
   collectCoverageFrom: [
     'packages/{base,charts,main}/src/**/*.{ts,tsx}',
-    '!**/src/lib/*',
+    '!**/src/lib/**/*',
     '!**/src/interfaces/*',
     '!**/src/enums/*',
     '!**/*.stories.tsx',

From b6b45fd0bcb1a7cbbccdecd29fd0e63b11dd78b6 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Tue, 28 Apr 2020 13:12:32 +0200
Subject: [PATCH 27/30] Improved padding of composed chart

---
 .../ComposedChart/ComposedChart.stories.tsx          |  3 ++-
 .../charts/src/components/ComposedChart/index.tsx    | 12 +++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
index 1583ff61f32..a77e008c787 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
@@ -141,7 +141,8 @@ export const renderCustomDataLabelStory = () => {
         },
         {
           accessor: 'volume',
-          type: 'line'
+          type: 'line',
+          width: 2
         }
       ]}
       style={{ width: '95%', height: '40vh' }}
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 3de53213b37..d93ae9bb59d 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -200,17 +200,22 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
 
+  let stackId = '';
   const paddingCharts = useMemo(
     () =>
       measures?.reduce((acc, chartElement) => {
-        if (chartElement.type === 'bar') {
+        console.log(chartElement.type === 'bar' && stackId !== chartElement.stackId);
+
+        if (chartElement.type === 'bar' && stackId !== chartElement.stackId) {
+          stackId = chartElement.stackId ?? '';
           // @ts-ignore
-          acc += chartElement?.width ?? 20;
+          acc += chartElement?.width ?? BAR_DEFAULT_PADDING;
         }
         return acc;
-      }, BAR_DEFAULT_PADDING),
+      }, 0),
     [measures]
   );
+  console.log(paddingCharts);
 
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 
@@ -344,6 +349,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
               } else {
                 labelPosition = 'insideTop';
               }
+              chartElementProps.maxBarSize = 40;
               break;
             case 'area':
               chartElementProps.dot = !isBigDataSet;

From 333e7d5d4cee7fb322d5848fb511d464e07d3544 Mon Sep 17 00:00:00 2001
From: klju1017 <julian.klein@sap.com>
Date: Tue, 28 Apr 2020 13:14:40 +0200
Subject: [PATCH 28/30] code clean up

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

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index d93ae9bb59d..d463bc92ac7 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -215,7 +215,6 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
       }, 0),
     [measures]
   );
-  console.log(paddingCharts);
 
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 

From 20e2095c87d57c12f6bff6ae6a904ab117a31ad6 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 14:12:20 +0200
Subject: [PATCH 29/30] Update index.tsx

---
 .../src/components/ComposedChart/index.tsx    | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index d463bc92ac7..1acf014ae2c 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -200,21 +200,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
 
-  let stackId = '';
-  const paddingCharts = useMemo(
-    () =>
-      measures?.reduce((acc, chartElement) => {
-        console.log(chartElement.type === 'bar' && stackId !== chartElement.stackId);
-
-        if (chartElement.type === 'bar' && stackId !== chartElement.stackId) {
-          stackId = chartElement.stackId ?? '';
-          // @ts-ignore
-          acc += chartElement?.width ?? BAR_DEFAULT_PADDING;
-        }
-        return acc;
-      }, 0),
-    [measures]
-  );
+  const paddingCharts = useMemo(() => {
+    let stackId = '';
+    return measures?.reduce((acc, chartElement) => {
+      if (chartElement.type === 'bar' && stackId !== chartElement.stackId) {
+        stackId = chartElement.stackId ?? '';
+        acc += chartElement?.width ?? BAR_DEFAULT_PADDING;
+      }
+      return acc;
+    }, 0);
+  }, [measures]);
 
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 

From 5c498645a121d58c844c89025d926969cdbca426 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Tue, 28 Apr 2020 14:13:37 +0200
Subject: [PATCH 30/30] add more default padding

---
 packages/charts/src/components/ComposedChart/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 1acf014ae2c..4d7591aadf1 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -208,7 +208,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
         acc += chartElement?.width ?? BAR_DEFAULT_PADDING;
       }
       return acc;
-    }, 0);
+    }, 5);
   }, [measures]);
 
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();