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/config/jest.config.js b/config/jest.config.js
index e18b17d7f70..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',
@@ -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'],
diff --git a/packages/charts/package.json b/packages/charts/package.json
index b7532383ec2..72005d0791e 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -28,7 +28,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/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;
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 011889f452b..5faa12e818a 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -17,14 +17,17 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, 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 '@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 formatYAxisTicks = (tick = '') => {
   const splitTick = tick.split(' ');
   return splitTick.length > 3
     ? `${splitTick.slice(0, 3).join(' ')}...`
@@ -164,16 +167,13 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
-    primaryDimensionAccessor,
+    dimensions,
     chartConfig.margin,
     true,
     dimensions.length > 1,
     chartConfig.zoomingTool
   );
 
-  const XAxisLabel = useAxisLabel(primaryMeasure?.formatter);
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -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}
@@ -195,7 +195,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}
           />
@@ -203,9 +203,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)}
@@ -221,14 +219,6 @@ 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
-          );
           return (
             <Bar
               stackId={element.stackId}
@@ -236,7 +226,7 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={BarDataLabel}
+              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/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/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 39eee761822..c3cc4503d3b 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,13 +16,15 @@ 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"
-    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/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 2c81b05dd4d..07c3a3f598f 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,16 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { useChartMargin } from '../../hooks/useChartMargin';
+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 { useDataLabel, useAxisLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
-import { useChartMargin } from '../../hooks/useChartMargin';
-import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
+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 {
   /**
@@ -168,8 +171,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
-    primaryDimensionAccessor,
+    measures,
     chartConfig.margin,
     false,
     dimensions.length > 1,
@@ -195,14 +197,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}
               />
@@ -212,8 +213,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
@@ -226,13 +227,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
           />
         )}
         {measures.map((element, index) => {
-          const ColumnDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            !!element.stackId,
-            false
-          );
           return (
             <Column
               yAxisId={chartConfig?.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
@@ -241,7 +235,7 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
               key={element.accessor}
               name={element.label ?? element.accessor}
               strokeOpacity={element.opacity}
-              label={ColumnDataLabel}
+              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/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/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 064ef731500..fea4704d7db 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,13 +16,15 @@ 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"
-    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/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/ComposedChart.stories.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.stories.tsx
index b52660823f4..a77e008c787 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',
@@ -140,7 +141,8 @@ export const renderCustomDataLabelStory = () => {
         },
         {
           accessor: 'volume',
-          type: 'line'
+          type: 'line',
+          width: 2
         }
       ]}
       style={{ width: '95%', height: '40vh' }}
@@ -162,6 +164,7 @@ export const withReferenceLineStory = () => {
       onLegendClick={action('onLegendClick')}
       dataset={bigDataSet}
       dimensions={[{ accessor: 'name' }]}
+      layout={select('layout', ['horizontal', 'vertical'], 'horizontal')}
       measures={[
         {
           accessor: 'users',
@@ -195,3 +198,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/__snapshots__/ComposedChart.test.tsx.snap b/packages/charts/src/components/ComposedChart/__snapshots__/ComposedChart.test.tsx.snap
index 978793196e0..2a93279ea19 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,13 +16,15 @@ 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"
-    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/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index cd09277e58f..4d7591aadf1 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';
@@ -13,12 +16,13 @@ import {
   ComposedChart as ComposedChartLib,
   Legend,
   Line,
+  ReferenceLine,
   Tooltip,
   XAxis,
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
+import { useSecondaryDimensionLabel } from '../../hooks/useLabelElements';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter';
 import { IChartDimension } from '../../interfaces/IChartDimension';
@@ -31,8 +35,7 @@ const dimensionDefaults = {
 
 const measureDefaults = {
   formatter: (d) => d,
-  opacity: 1,
-  width: 1
+  opacity: 1
 };
 
 interface MeasureConfig extends IChartMeasure {
@@ -83,6 +86,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 +114,7 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
     onDataPointClick,
     noLegend = false,
     onLegendClick,
+    layout = 'horizontal',
     chartConfig = {
       margin: {},
       yAxisVisible: false,
@@ -118,6 +127,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,
@@ -186,17 +200,16 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
 
-  const paddingCharts = useMemo(
-    () =>
-      measures?.reduce((acc, chartElement) => {
-        if (chartElement.type === 'bar') {
-          // @ts-ignore
-          acc += chartElement?.width ?? 20;
-        }
-        return acc;
-      }, BAR_DEFAULT_PADDING),
-    [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;
+    }, 5);
+  }, [measures]);
 
   const SecondaryDimensionLabel = useSecondaryDimensionLabel();
 
@@ -205,26 +218,36 @@ const ComposedChart: FC<ComposedChartProps> = forwardRef((props: ComposedChartPr
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
-    primaryDimensionAccessor,
+    layout === 'vertical' ? dimensions : measures,
     chartConfig.margin,
     false,
     dimensions.length > 1,
     chartConfig.zoomingTool
   );
 
+  const measureAxisProps = {
+    axisLine: chartConfig.yAxisVisible ?? false,
+    tickLine: false,
+    tickFormatter: primaryMeasure?.formatter,
+    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}
       slot={slot}
     >
-      <ComposedChartLib margin={marginChart} data={dataset}>
+      <ComposedChartLib margin={marginChart} data={dataset} layout={layout}>
         <CartesianGrid
           vertical={chartConfig.gridVertical ?? false}
           horizontal={chartConfig.gridHorizontal}
@@ -232,82 +255,121 @@ 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 ? <XAxisTicks config={dimension} /> : 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 {...measureAxisProps} yAxisId="primary" tick={<YAxisTicks config={primaryMeasure} />} />
+        )}
+        {layout === 'vertical' && (
+          <XAxis {...measureAxisProps} xAxisId="primary" type="number" tick={<XAxisTicks config={primaryMeasure} />} />
+        )}
+
+        {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"
             interval={0}
+            yAxisId="secondary"
+          />
+        )}
+        {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"
+            interval={0}
+            xAxisId="secondary"
+            type="number"
+          />
+        )}
+        {chartConfig.referenceLine && (
+          <ReferenceLine
+            stroke={chartConfig.referenceLine.color}
+            y={layout === 'horizontal' ? chartConfig.referenceLine.value : undefined}
+            x={layout === 'vertical' ? chartConfig.referenceLine.value : undefined}
+            label={chartConfig.referenceLine.label}
+            yAxisId={layout === 'horizontal' ? 'primary' : undefined}
+            xAxisId={layout === 'vertical' ? 'primary' : undefined}
           />
         )}
         <Tooltip cursor={{ fillOpacity: 0.3 }} formatter={tooltipValueFormatter} />
         {!noLegend && <Legend verticalAlign={chartConfig.legendPosition ?? 'top'} onClick={onItemLegendClick} />}
         {measures?.map((element, index) => {
-          const ComposedDataLabel = useDataLabel(
-            !element.hideDataLabel,
-            element.DataLabel,
-            element.formatter,
-            !!(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;
+              chartElementProps.labelPosition = element.stackId ? 'insideTop' : 'top';
+              if (layout === 'vertical') {
+                labelPosition = 'insideRight';
+              } else {
+                labelPosition = 'insideTop';
+              }
+              chartElementProps.maxBarSize = 40;
               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;
           }
+
+          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={isBigDataSet ? false : ComposedDataLabel}
+              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/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 1d5c24e57af..873089a21af 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,13 +16,15 @@ 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"
-    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/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 42b72e254db..c1f94798ec9 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -17,12 +17,15 @@ import {
   YAxis
 } from 'recharts';
 import { useChartMargin } from '../../hooks/useChartMargin';
-import { useAxisLabel, useDataLabel, 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 '@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 {
   /**
@@ -159,8 +162,7 @@ const LineChart: FC<LineChartProps> = forwardRef((props: LineChartProps, ref: Re
 
   const marginChart = useChartMargin(
     dataset,
-    (d) => d,
-    primaryDimensionAccessor,
+    measures,
     chartConfig.margin,
     false,
     dimensions.length > 1,
@@ -186,14 +188,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}
               />
@@ -205,6 +206,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
@@ -217,14 +219,6 @@ 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
-          );
           return (
             <Line
               dot={!isBigDataSet}
@@ -232,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 : LineDataLabel}
+              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/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/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 434befb65be..525cb77763c 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,13 +16,15 @@ 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"
-    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/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/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/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/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 b7092a9862c..50e6e9050cd 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,13 +16,15 @@ 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"
-    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/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 768b10e2bd2..5f10558bf2f 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';
+import { ChartDataLabel } from '@ui5/webcomponents-react-charts/lib/components/ChartDataLabel';
 
 interface MeasureConfig extends IChartMeasure {
   /**
@@ -108,21 +107,22 @@ 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
+            }
+          )
         );
       }
     },
     [onDataPointClick]
   );
 
-  const marginChart = useChartMargin(dataset, (d) => d, primaryDimensionAccessor, chartConfig.margin, true, true, true);
-
   return (
     <ChartContainer
       dataset={dataset}
@@ -134,7 +134,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}
@@ -145,14 +145,6 @@ 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
-          );
           return (
             <Radar
               key={element.accessor}
@@ -162,14 +154,12 @@ 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={<ChartDataLabel config={element} chartType="radar" position={'outside'} />}
             />
           );
         })}
         <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>
   );
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 77f8c0a41d0..a020701d119 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,13 +16,15 @@ 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"
-    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/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/__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/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/hooks/useChartMargin.ts b/packages/charts/src/hooks/useChartMargin.ts
index 5df69b6b21a..0149dbbf269 100644
--- a/packages/charts/src/hooks/useChartMargin.ts
+++ b/packages/charts/src/hooks/useChartMargin.ts
@@ -1,13 +1,19 @@
 import { useMemo } from 'react';
-import { getTextWidth } from '../util/Utils';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
+import { getTextWidth, truncateLongLabel } from '../util/Utils';
 
-export const useChartMargin = (dataset, formatter, labelKey, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
+export const useChartMargin = (dataset: unknown[], elements, margin, isBar?, hasSecondaryDimension?, hasZoomingTool?) =>
   useMemo(() => {
     let marginLeft = 0;
-    if (dataset && isBar && typeof margin?.left !== 'number') {
+    const primaryElement = elements[0];
+    if (dataset instanceof Array && primaryElement) {
       marginLeft = Math.max(
         ...dataset
-          .map((data) => formatter(data[labelKey]).split(' '))
+          .map((item) =>
+            elements.map((elementConfig) =>
+              truncateLongLabel(primaryElement.formatter(getValueByDataKey(item, elementConfig.accessor, '')))
+            )
+          )
           .flat()
           .map(getTextWidth)
       );
@@ -16,7 +22,6 @@ export const useChartMargin = (dataset, formatter, labelKey, margin, isBar?, has
       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
+      left: margin?.left ?? (isBar && hasSecondaryDimension) ? marginLeft : marginLeft / 2
     };
-  }, [dataset, labelKey, margin]);
+  }, [dataset, elements, margin, hasSecondaryDimension, hasZoomingTool]);
diff --git a/packages/charts/src/hooks/useLabelElements.ts b/packages/charts/src/hooks/useLabelElements.ts
deleted file mode 100644
index 9bf84d78103..00000000000
--- a/packages/charts/src/hooks/useLabelElements.ts
+++ /dev/null
@@ -1,69 +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 = (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
-        };
-      }
-    }
-    return false;
-  }, [stacked, bar, showDataLabel, dataLabelFormatter, dataLabelCustomElement]);
-
-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..ba1bf7f1110
--- /dev/null
+++ b/packages/charts/src/hooks/useLabelElements.tsx
@@ -0,0 +1,13 @@
+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;
+    }
+    dimension = labelProps.payload.value;
+    return yAxis ? SecondaryDimensionTicksYAxis(labelProps, yAxisFormatter) : SecondaryDimensionTicksXAxis(labelProps);
+  }, []);
+};
diff --git a/packages/charts/src/internal/ChartContainer.tsx b/packages/charts/src/internal/ChartContainer.tsx
index 5842e239c61..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;
@@ -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',
diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx
new file mode 100644
index 00000000000..4f721c618a3
--- /dev/null
+++ b/packages/charts/src/internal/ChartDataLabel.tsx
@@ -0,0 +1,45 @@
+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' | 'area';
+  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;
+    }
+  }
+
+  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/ChartLabel.tsx b/packages/charts/src/internal/ChartLabel.tsx
new file mode 100644
index 00000000000..77756161cec
--- /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/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;
+  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/packages/charts/src/internal/CustomElements.tsx b/packages/charts/src/internal/CustomElements.tsx
index 57762af9c0b..ab83c043e36 100644
--- a/packages/charts/src/internal/CustomElements.tsx
+++ b/packages/charts/src/internal/CustomElements.tsx
@@ -3,41 +3,6 @@ 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);
-  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;
@@ -45,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}
@@ -70,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
new file mode 100644
index 00000000000..2144a2475d6
--- /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.sapContent_LabelColor}
+        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/internal/YAxisTicks.tsx b/packages/charts/src/internal/YAxisTicks.tsx
new file mode 100644
index 00000000000..d708022a1f7
--- /dev/null
+++ b/packages/charts/src/internal/YAxisTicks.tsx
@@ -0,0 +1,16 @@
+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 = truncateLongLabel(formattedValue);
+  return (
+    <g transform={`translate(${x},${y + 3})`}>
+      <text fill={ThemingParameters.sapContent_LabelColor} textAnchor={'end'}>
+        {`${tickValue}`}
+      </text>
+    </g>
+  );
+};
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/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 };
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 };
diff --git a/packages/charts/src/util/Utils.ts b/packages/charts/src/util/Utils.ts
index e2b60470222..e148a0ae2cf 100644
--- a/packages/charts/src/util/Utils.ts
+++ b/packages/charts/src/util/Utils.ts
@@ -1,57 +1,8 @@
-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(() => {
-    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');
@@ -60,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');
@@ -69,22 +20,9 @@ export const getTextHeight = (text = 'M', font = `normal ${defaultFont.size}pt $
   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);
+export const truncateLongLabel = (value: string, length = 13) => {
+  if (value.length > length) {
+    return `${value.slice(0, length)}...`;
   }
+  return value;
 };
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;
+};
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"