diff --git a/packages/charts/package.json b/packages/charts/package.json
index 10d4b98ce84..215d1f2a576 100644
--- a/packages/charts/package.json
+++ b/packages/charts/package.json
@@ -36,7 +36,7 @@
   "dependencies": {
     "clsx": "2.1.1",
     "react-content-loader": "7.1.1",
-    "recharts": "2.15.4"
+    "recharts": "3.1.2"
   },
   "peerDependencies": {
     "@ui5/webcomponents-react": "~2.13.0",
diff --git a/packages/charts/src/components/BarChart/BarChart.stories.tsx b/packages/charts/src/components/BarChart/BarChart.stories.tsx
index 6211e1bd9bc..e9132736cc7 100644
--- a/packages/charts/src/components/BarChart/BarChart.stories.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.stories.tsx
@@ -86,7 +86,18 @@ export const WithDataLabels: Story = {
 
 export const WithFormatter: Story = {
   args: {
-    dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
+    dimensions: [
+      {
+        accessor: 'name',
+        formatter: (element) => {
+          //todo: remove once issue has been fixed (should never be number in this case)
+          if (typeof element === 'string') {
+            return element.slice(0, 3);
+          }
+          return element;
+        },
+      },
+    ],
     measures: [
       {
         accessor: 'users',
diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 2d0e5c2dad3..d1efb1e4e7b 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import {
   Bar,
   BarChart as BarChartLib,
@@ -17,7 +17,6 @@ import {
   YAxis,
 } from 'recharts';
 import type { YAxisProps } from 'recharts';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -27,7 +26,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
@@ -48,12 +47,6 @@ const measureDefaults = {
   opacity: 1,
 };
 
-const valueAccessor =
-  (attribute) =>
-  ({ payload }) => {
-    return getValueByDataKey(payload, attribute);
-  };
-
 interface MeasureConfig extends IChartMeasure {
   /**
    * Bar Width
@@ -165,7 +158,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     ...props.chartConfig,
   };
   const referenceLine = chartConfig.referenceLine;
-
   const { dimensions, measures } = usePrepareDimensionsAndMeasures(
     props.dimensions,
     props.measures,
@@ -187,7 +179,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     : 0;
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
-
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
@@ -210,7 +202,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     [onDataPointClick],
   );
 
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
@@ -313,17 +305,28 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
           })}
         {isMounted &&
           measures.map((element, index) => {
+            const color = element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+            const dataKey = element.accessor;
+            const name = element.label ?? element.accessor;
+            const opacity = element.opacity ?? 1;
+            activePayloadsRef.current[index].color = color;
+            activePayloadsRef.current[index].stroke = color;
+            activePayloadsRef.current[index].dataKey = dataKey;
+            activePayloadsRef.current[index].hide = element.hide;
+            activePayloadsRef.current[index].name = name;
+            activePayloadsRef.current[index].fillOpacity = opacity;
+            activePayloadsRef.current[index].strokeOpacity = opacity;
             return (
               <Bar
+                key={element.reactKey}
+                fill={color}
+                stroke={color}
                 stackId={element.stackId}
+                name={name}
                 fillOpacity={element.opacity}
-                key={element.reactKey}
-                name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"
-                dataKey={element.accessor}
-                fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-                stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
+                dataKey={dataKey}
                 barSize={element.width}
                 onClick={onDataPointClickInternal}
                 isAnimationActive={!noAnimation}
@@ -331,8 +334,7 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
                 onAnimationEnd={handleBarAnimationEnd}
               >
                 <LabelList
-                  data={dataset}
-                  valueAccessor={valueAccessor(element.accessor)}
+                  dataKey={element.accessor}
                   content={<ChartDataLabel config={element} chartType="bar" position={'insideRight'} />}
                 />
                 {dataset.map((data, i) => {
@@ -364,7 +366,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             label={referenceLine?.label}
           />
         )}
-        {/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
         {tooltipConfig?.active !== false && (
           <Tooltip
             cursor={tooltipFillOpacity}
diff --git a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
index 0e951d8edf4..fd9ae17a8bc 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.cy.tsx
@@ -64,7 +64,7 @@ describe('BulletChart', () => {
         }),
       );
 
-    cy.contains('Users').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('Users').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
diff --git a/packages/charts/src/components/BulletChart/BulletChart.stories.tsx b/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
index ed746d247f9..7dcdfd8e75e 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
@@ -52,7 +52,18 @@ export const Default: Story = {};
 export const WithCustomSize: Story = {
   args: {
     layout: 'vertical',
-    dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
+    dimensions: [
+      {
+        accessor: 'name',
+        formatter: (element) => {
+          //todo: remove once issue has been fixed (should never be number in this case)
+          if (typeof element === 'string') {
+            return element.slice(0, 3);
+          }
+          return element;
+        },
+      },
+    ],
     measures: [
       {
         accessor: 'users',
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index 855683c5bc3..e7282129a54 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback, useMemo } from 'react';
+import { useRef, forwardRef, useCallback, useMemo } from 'react';
 import {
   Bar,
   Brush,
@@ -24,7 +24,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
@@ -172,17 +172,22 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
     dimensionDefaults,
     measureDefaults,
   );
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
 
   const sortedMeasures = useMemo(() => {
-    return measures.sort((measure) => {
-      if (measure.type === 'comparison') {
+    return [...measures].sort((a, b) => {
+      if (a.type === 'primary' && b.type !== 'primary') {
+        return -1;
+      }
+      if (b.type === 'primary' && a.type !== 'primary') {
         return 1;
       }
-
-      if (measure.type === 'primary') {
+      if (a.type === 'comparison' && b.type !== 'comparison') {
+        return 1;
+      }
+      if (b.type === 'comparison' && a.type !== 'comparison') {
         return -1;
       }
-
       return 0;
     });
   }, [measures]);
@@ -239,7 +244,8 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
   );
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
-  const onClickInternal = useOnClickInternal(onClick);
+  //todo: implement activePayloadsRef
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index a0d7c4ac5e8..5a2a732fb8c 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import {
   Bar as Column,
   BarChart as ColumnChartLib,
@@ -17,7 +17,6 @@ import {
   YAxis,
 } from 'recharts';
 import type { YAxisProps } from 'recharts';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useCancelAnimationFallback } from '../../hooks/useCancelAnimationFallback.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
@@ -27,7 +26,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
@@ -116,12 +115,6 @@ const measureDefaults = {
   opacity: 1,
 };
 
-const valueAccessor =
-  (attribute) =>
-  ({ payload }) => {
-    return getValueByDataKey(payload, attribute);
-  };
-
 /**
  * A `ColumnChart` is a data visualization where each category is represented by a rectangle, with the height of the rectangle being proportional to the values being plotted.
  */
@@ -183,6 +176,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
   const tooltipLabelFormatter = useLabelFormatter(primaryDimension?.formatter);
 
   const [componentRef, chartRef] = useSyncRef<any>(ref);
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
 
   const dataKeys = measures.map(({ accessor }) => accessor);
   const colorSecondY = chartConfig.secondYAxis
@@ -211,7 +205,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
     [onDataPointClick],
   );
 
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
@@ -307,18 +301,30 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
         )}
         {isMounted &&
           measures.map((element, index) => {
+            const color = element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+            const dataKey = element.accessor;
+            const name = element.label ?? element.accessor;
+            const opacity = element.opacity ?? 1;
+            activePayloadsRef.current[index].color = color;
+            activePayloadsRef.current[index].stroke = color;
+            activePayloadsRef.current[index].dataKey = dataKey;
+            activePayloadsRef.current[index].hide = element.hide;
+            activePayloadsRef.current[index].name = name;
+            activePayloadsRef.current[index].fillOpacity = opacity;
+            activePayloadsRef.current[index].strokeOpacity = opacity;
             return (
               <Column
-                yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
+                key={element.reactKey}
+                fill={color}
+                stroke={color}
                 stackId={element.stackId}
+                name={name}
                 fillOpacity={element.opacity}
-                key={element.reactKey}
-                name={element.label ?? element.accessor}
                 strokeOpacity={element.opacity}
                 type="monotone"
-                dataKey={element.accessor}
-                fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-                stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
+                dataKey={dataKey}
+                // todo: multiple `yAxisId`s cause the Cartesian Grid to break
+                yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
                 barSize={element.width}
                 onClick={onDataPointClickInternal}
                 isAnimationActive={!noAnimation}
@@ -326,8 +332,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
                 onAnimationEnd={handleBarAnimationEnd}
               >
                 <LabelList
-                  data={dataset}
-                  valueAccessor={valueAccessor(element.accessor)}
+                  dataKey={element.accessor}
                   content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
                 />
                 {dataset.map((data, i) => {
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
index e1b0505d481..a4c018c4078 100644
--- a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
+++ b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
@@ -51,12 +51,13 @@ describe('ComposedChart', () => {
         measures={measures}
         onClick={onClick}
         onLegendClick={onLegendClick}
+        noAnimation
       />,
     );
 
     cy.findByText('January').click();
     cy.get('@onClick').should('have.been.called');
-    cy.get('[name="January"]').eq(0).click();
+    cy.get('[name="January"]').eq(0).realClick({ position: 'topLeft' });
     cy.get('@onClick')
       .should('have.been.calledTwice')
       .and(
@@ -68,7 +69,7 @@ describe('ComposedChart', () => {
         }),
       );
 
-    cy.contains('Users').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('Users').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 610e3ca13ef..81e08fd23f1 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -2,7 +2,7 @@
 
 import { enrichEventWithDetails, ThemingParameters, useIsRTL, useSyncRef } from '@ui5/webcomponents-react-base';
 import type { CSSProperties, FC } from 'react';
-import { forwardRef, useCallback } from 'react';
+import { useRef, forwardRef, useCallback } from 'react';
 import {
   Area,
   Bar,
@@ -19,7 +19,6 @@ import {
   YAxis,
 } from 'recharts';
 import type { YAxisProps } from 'recharts';
-import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useChartMargin } from '../../hooks/useChartMargin.js';
 import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
 import { useLegendItemClick } from '../../hooks/useLegendItemClick.js';
@@ -28,7 +27,7 @@ import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
@@ -189,6 +188,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
     measureDefaults,
   );
 
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
   const tooltipValueFormatter = useTooltipFormatter(measures);
 
   const primaryDimension = dimensions[0];
@@ -204,12 +204,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
     ? dataKeys.findIndex((key) => key === chartConfig.secondYAxis?.dataKey)
     : 0;
 
-  const valueAccessor =
-    (attribute) =>
-    ({ payload }) => {
-      return getValueByDataKey(payload, attribute);
-    };
-
   const onDataPointClickInternal = (payload, eventOrIndex, event) => {
     if (typeof onDataPointClick === 'function') {
       if (typeof eventOrIndex === 'number') {
@@ -245,7 +239,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
   };
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const isBigDataSet = dataset?.length > 30;
   const primaryDimensionAccessor = primaryDimension?.accessor;
@@ -439,11 +433,22 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
         )}
         {measures?.map((element, index) => {
           const ChartElement = ChartTypes[element.type] as any as FC<any>;
-
           const chartElementProps: any = {
             isAnimationActive: !noAnimation,
           };
           let labelPosition = 'top';
+          const color = element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+          const dataKey = element.accessor;
+          const name = element.label ?? element.accessor;
+          const opacity = element.opacity ?? 1;
+          const hide = element.hide;
+          activePayloadsRef.current[index].color = color;
+          activePayloadsRef.current[index].stroke = color;
+          activePayloadsRef.current[index].dataKey = dataKey;
+          activePayloadsRef.current[index].hide = hide;
+          activePayloadsRef.current[index].name = name;
+          activePayloadsRef.current[index].fillOpacity = opacity;
+          activePayloadsRef.current[index].strokeOpacity = opacity;
 
           switch (element.type) {
             case 'line':
@@ -454,9 +459,12 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.dot = element.showDot ?? !isBigDataSet;
               chartElementProps.hide = element.hide;
+
+              activePayloadsRef.current[index].fillOpacity = opacity;
+              activePayloadsRef.current[index].strokeOpacity = opacity;
               break;
             case 'bar':
-              chartElementProps.hide = element.hide;
+              chartElementProps.hide = hide;
               chartElementProps.fillOpacity = element.opacity;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.barSize = element.width;
@@ -477,6 +485,9 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               chartElementProps.activeDot = {
                 onClick: onDataPointClickInternal,
               };
+
+              activePayloadsRef.current[index].fillOpacity = 0.3;
+              activePayloadsRef.current[index].strokeOpacity = opacity;
               break;
           }
 
@@ -488,23 +499,22 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
           return (
             <ChartElement
               key={element.reactKey}
-              name={element.label ?? element.accessor}
+              name={name}
               label={
                 element.type === 'bar' || isBigDataSet ? undefined : (
                   <ChartDataLabel config={element} chartType={element.type} position={labelPosition} />
                 )
               }
-              stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-              fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
+              stroke={color}
+              fill={color}
               type="monotone"
-              dataKey={element.accessor}
+              dataKey={dataKey}
               {...chartElementProps}
             >
               {element.type === 'bar' && (
                 <>
                   <LabelList
-                    data={dataset}
-                    valueAccessor={valueAccessor(element.accessor)}
+                    dataKey={dataKey}
                     content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
                   />
                   {dataset.map((data, i) => {
diff --git a/packages/charts/src/components/DonutChart/DonutChart.cy.tsx b/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
index b1cce009f9a..a1a1dd3abb8 100644
--- a/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
+++ b/packages/charts/src/components/DonutChart/DonutChart.cy.tsx
@@ -43,7 +43,7 @@ describe('DonutChart', () => {
         }),
       );
 
-    cy.contains('January').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('January').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 1a11e9c3dbd..abaec19b351 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -19,9 +19,10 @@ import { useLabelFormatter } from '../../hooks/useLabelFormatter.js';
 import { useLegendItemClick } from '../../hooks/useLegendItemClick.js';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel.js';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights.js';
+import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
 import { usePrepareDimensionsAndMeasures } from '../../hooks/usePrepareDimensionsAndMeasures.js';
 import { useTooltipFormatter } from '../../hooks/useTooltipFormatter.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
@@ -160,7 +161,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
     dimensionDefaults,
     measureDefaults,
   );
-
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
   const tooltipValueFormatter = useTooltipFormatter(measures);
 
   const primaryDimension = dimensions[0];
@@ -180,6 +181,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const preventOnClickCall = useRef(0);
+  const handleClick = useOnClickInternal(onClick, dataset, activePayloadsRef);
+
   const onDataPointClickInternal = useCallback(
     (payload, eventOrIndex) => {
       if (eventOrIndex.dataKey && typeof onDataPointClick === 'function') {
@@ -193,18 +196,13 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
           }),
         );
       } else if (typeof onClick === 'function' && preventOnClickCall.current === 0) {
-        onClick(
-          enrichEventWithDetails(eventOrIndex, {
-            payload: payload?.activePayload?.[0]?.payload,
-            activePayloads: payload?.activePayload,
-          }),
-        );
+        handleClick(payload, eventOrIndex);
       }
       if (preventOnClickCall.current > 0) {
         preventOnClickCall.current -= 1;
       }
     },
-    [onDataPointClick, preventOnClickCall.current],
+    [handleClick, onClick, onDataPointClick],
   );
 
   const isBigDataSet = dataset?.length > 30;
@@ -265,6 +263,7 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
           orientation={isRTL === true ? 'right' : 'left'}
           axisLine={chartConfig.yAxisVisible}
           tickLine={tickLineConfig}
+          // todo: multiple `yAxisId`s cause the Cartesian Grid to break
           yAxisId="left"
           interval={0}
           tick={chartConfig.yAxisTicksVisible && <YAxisTicks formatter={primaryMeasure?.formatter} />}
@@ -296,17 +295,28 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
           />
         )}
         {measures.map((element, index) => {
+          const color = element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+          const dataKey = element.accessor;
+          const name = element.label ?? element.accessor;
+          const opacity = element.opacity ?? 1;
+          activePayloadsRef.current[index].color = color;
+          activePayloadsRef.current[index].stroke = color;
+          activePayloadsRef.current[index].dataKey = dataKey;
+          activePayloadsRef.current[index].hide = element.hide;
+          activePayloadsRef.current[index].name = name;
+          activePayloadsRef.current[index].fillOpacity = opacity;
+          activePayloadsRef.current[index].strokeOpacity = opacity;
           return (
             <Line
               dot={element.showDot ?? !isBigDataSet}
               yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
               key={element.reactKey}
-              name={element.label ?? element.accessor}
-              strokeOpacity={element.opacity}
+              name={name}
+              strokeOpacity={opacity}
               label={isBigDataSet ? false : <ChartDataLabel config={element} chartType="line" position="top" />}
               type="monotone"
-              dataKey={element.accessor}
-              stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
+              dataKey={dataKey}
+              stroke={color}
               strokeWidth={element.width}
               activeDot={{ onClick: onDataPointClickInternal }}
               isAnimationActive={!noAnimation}
@@ -332,7 +342,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
             label={referenceLine?.label}
           />
         )}
-        {/*ToDo: remove conditional rendering once `active` is working again (https://github.com/recharts/recharts/issues/2703)*/}
         {tooltipConfig?.active !== false && (
           <Tooltip
             cursor={tooltipFillOpacity}
diff --git a/packages/charts/src/components/PieChart/PieChart.cy.tsx b/packages/charts/src/components/PieChart/PieChart.cy.tsx
index 8891a276d95..2094462f7a7 100644
--- a/packages/charts/src/components/PieChart/PieChart.cy.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.cy.tsx
@@ -44,7 +44,7 @@ describe('PieChart', () => {
         }),
       );
 
-    cy.contains('January').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('January').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
diff --git a/packages/charts/src/components/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
index 489efb8a7cd..5cad576a831 100644
--- a/packages/charts/src/components/PieChart/PieChart.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -3,9 +3,10 @@
 import { enrichEventWithDetails, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
-import { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
+import { useRef, cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
 import {
   Cell,
+  Curve,
   Label as RechartsLabel,
   Legend,
   Pie,
@@ -17,7 +18,7 @@ import {
 import { getValueByDataKey } from 'recharts/lib/util/ChartUtils.js';
 import { useLegendItemClick } from '../../hooks/useLegendItemClick.js';
 import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
-import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
+import type { ActivePayload, IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import type { IChartDimension } from '../../interfaces/IChartDimension.js';
 import type { IChartMeasure } from '../../interfaces/IChartMeasure.js';
 import type { IPolarChartConfig } from '../../interfaces/IPolarChartConfig.js';
@@ -140,6 +141,16 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     }),
     [props.measure],
   );
+  const activePayloadsRef = useRef<ActivePayload>({
+    ...measure,
+    // these properties must be either set in the component, or in the `useOnClickInternal` hook
+    dataKey: measure.accessor,
+    name: measure.accessor,
+    color: '',
+    stroke: '',
+    payload: {},
+    value: '',
+  });
 
   const dataLabel = (props) => {
     const hideDataLabel =
@@ -163,11 +174,12 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
   );
 
   const onItemLegendClick = useLegendItemClick(onLegendClick, () => measure.accessor);
-  const onClickInternal = useOnClickInternal(onClick);
+  const onClickInternal = useOnClickInternal(onClick, dataset, activePayloadsRef);
 
   const onDataPointClickInternal = useCallback(
     (payload, dataIndex, event) => {
       if (payload && payload && typeof onDataPointClick === 'function') {
+        //todo check values
         onDataPointClick(
           enrichEventWithDetails(event, {
             value: payload.value,
@@ -253,8 +265,10 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
     (props) => {
       const hideDataLabel =
         typeof measure.hideDataLabel === 'function' ? measure.hideDataLabel(props) : measure.hideDataLabel;
-      if (hideDataLabel || chartConfig.activeSegment === props.index) return null;
-      return Pie.renderLabelLineItem({}, props, undefined);
+      if (hideDataLabel || chartConfig.activeSegment === props.index) {
+        return null;
+      }
+      return <Curve {...props} type="linear" className={'recharts-pie-label-line'} />;
     },
     [chartConfig.activeSegment, measure.hideDataLabel],
   );
@@ -299,6 +313,10 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           classNames.piechart,
         )}
       >
+        {/*todo: accessibility layer needs active shape?*/}
+        {/*todo: keyboard nav with active shape doesn't hide the default label of the Cell when active*/}
+        {/*todo: when clicked while activeShape is set, it takes a lot of time to rerender the component, leading to
+        strange behavior*/}
         <Pie
           onClick={onDataPointClickInternal}
           innerRadius={chartConfig.innerRadius}
@@ -311,19 +329,24 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           isAnimationActive={!noAnimation}
           labelLine={renderLabelLine}
           label={dataLabel}
-          activeIndex={chartConfig.activeSegment}
           activeShape={chartConfig.activeSegment != null && renderActiveShape}
-          rootTabIndex={-1}
+          //todo: why do we need this?
+          // rootTabIndex={-1}
         >
           {centerLabel && <RechartsLabel position="center">{centerLabel}</RechartsLabel>}
           {dataset &&
-            dataset.map((data, index) => (
-              <Cell
-                key={index}
-                name={`${dimension.formatter(getValueByDataKey(data, dimension.accessor, ''))}`}
-                fill={measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
-              />
-            ))}
+            dataset.map((data, index) => {
+              const color = measure.colors?.[index] ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`;
+              activePayloadsRef.current.color = color;
+              activePayloadsRef.current.stroke = color;
+              return (
+                <Cell
+                  key={index}
+                  name={`${dimension.formatter(getValueByDataKey(data, dimension.accessor, ''))}`}
+                  fill={color}
+                />
+              );
+            })}
         </Pie>
         {tooltipConfig?.active !== false && (
           <Tooltip
@@ -335,12 +358,17 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
             {...tooltipConfig}
           />
         )}
+        {chartConfig.activeSegment && (
+          // tooltip that only renders the active shape
+          <Tooltip trigger="click" defaultIndex={chartConfig.activeSegment} active={false} />
+        )}
         {!noLegend && (
           <Legend
             verticalAlign={chartConfig.legendPosition}
             align={chartConfig.legendHorizontalAlign}
             onClick={onItemLegendClick}
             wrapperStyle={legendWrapperStyle}
+            itemSorter={'dataKey'}
             {...chartConfig.legendConfig}
           />
         )}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.cy.tsx b/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
index f1025f3ed8b..613c5b113c9 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.cy.tsx
@@ -52,7 +52,7 @@ describe('RadarChart', () => {
     cy.get('[name="January"]').eq(0).click({ force: true });
     cy.get('@onClick').should('have.been.calledTwice');
 
-    cy.contains('Users').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('Users').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
diff --git a/packages/charts/src/components/RadarChart/RadarChart.mdx b/packages/charts/src/components/RadarChart/RadarChart.mdx
index 830c50db85c..bbcfea6ba8b 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.mdx
+++ b/packages/charts/src/components/RadarChart/RadarChart.mdx
@@ -25,9 +25,9 @@ import LegendStory from '../../resources/LegendConfig.mdx';
 
 <Canvas of={ComponentStories.WithCustomColor} />
 
-### With Data Labels
+### Without Data Labels
 
-<Canvas of={ComponentStories.WithDataLabels} />
+<Canvas of={ComponentStories.WithoutDataLabels} />
 
 ### Polygon
 
diff --git a/packages/charts/src/components/RadarChart/RadarChart.stories.tsx b/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
index bd982be20d1..811d3118b9d 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { complexDataSet, legendConfig, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
+import { legendConfig, radarChartDataset, simpleDataSet, tooltipConfig } from '../../resources/DemoProps.js';
 import { RadarChart } from './RadarChart.js';
 
 const meta = {
@@ -9,27 +9,23 @@ const meta = {
     dimensions: [
       {
         accessor: 'name',
-        formatter: (d) => `${d} 2019`,
       },
     ],
     measures: [
       {
-        accessor: 'users',
-        label: 'Users',
-        formatter: (val) => val.toLocaleString(),
+        accessor: 'alpha',
+        label: 'Alpha Series',
       },
       {
-        accessor: 'sessions',
-        label: 'Active Sessions',
-        formatter: (val) => `${val} sessions`,
-        hideDataLabel: true,
+        accessor: 'beta',
+        label: 'Beta Series',
       },
       {
-        accessor: 'volume',
-        label: 'Vol.',
+        accessor: 'gamma',
+        label: 'Gamma Series',
       },
     ],
-    dataset: complexDataSet,
+    dataset: radarChartDataset,
   },
   argTypes: {
     dataset: {
@@ -51,18 +47,23 @@ export const WithCustomColor: Story = {
   },
 };
 
-export const WithDataLabels: Story = {
+export const WithoutDataLabels: Story = {
   args: {
-    dimensions: [{ accessor: 'name' }],
     measures: [
       {
-        accessor: 'users',
+        accessor: 'alpha',
+        label: 'Alpha Series',
+        hideDataLabel: true,
       },
       {
-        accessor: 'sessions',
+        accessor: 'beta',
+        label: 'Beta Series',
+        hideDataLabel: true,
       },
       {
-        accessor: 'volume',
+        accessor: 'gamma',
+        label: 'Gamma Series',
+        hideDataLabel: true,
       },
     ],
   },
@@ -70,20 +71,6 @@ export const WithDataLabels: Story = {
 
 export const Polygon: Story = {
   args: {
-    dimensions: [{ accessor: 'name', formatter: (element) => element.slice(0, 3) }],
-    measures: [
-      {
-        accessor: 'users',
-        formatter: (element) => `${element / 10}`,
-        label: 'number of users',
-      },
-      {
-        accessor: 'sessions',
-      },
-      {
-        accessor: 'volume',
-      },
-    ],
     chartConfig: { polarGridType: 'polygon' },
   },
 };
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index dc2c856b46d..0a5b117f045 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -125,8 +125,10 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const preventOnClickCall = useRef(false);
+  //todo: check this
   const onClickInternal = useCallback(
     (payload, event) => {
+      console.log(payload);
       if (typeof onClick === 'function' && !preventOnClickCall.current) {
         onClick(
           enrichEventWithDetails(event, {
@@ -217,8 +219,6 @@ const RadarChart = forwardRef<HTMLDivElement, RadarChartProps>((props, ref) => {
           />
         )}
         {!noLegend && (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           <Legend
             verticalAlign={chartConfig.legendPosition}
             align={chartConfig.legendHorizontalAlign}
diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx
index 8cdcd7eafe7..71e4e180f4a 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.tsx
+++ b/packages/charts/src/components/RadialChart/RadialChart.tsx
@@ -5,7 +5,7 @@ import { enrichEventWithDetails, ThemingParameters } from '@ui5/webcomponents-re
 import type { CSSProperties } from 'react';
 import { forwardRef } from 'react';
 import { PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
-import { useOnClickInternal } from '../../hooks/useOnClickInternal.js';
+import type { CategoricalChartFunc } from 'recharts/types/chart/types.js';
 import type { IChartBaseProps } from '../../interfaces/IChartBaseProps.js';
 import { ChartContainer } from '../../internal/ChartContainer.js';
 import { PieChartPlaceholder } from '../PieChart/Placeholder.js';
@@ -18,6 +18,7 @@ interface RadialChartConfig {
 
   [rest: string]: any;
 }
+
 export interface RadialChartProps
   extends Omit<CommonProps, 'onClick' | 'children' | 'onLegendClick'>,
     Pick<IChartBaseProps, 'loading' | 'loadingDelay'> {
@@ -57,6 +58,7 @@ export interface RadialChartProps
    */
   onClick?: (
     event: CustomEvent<{
+      // todo: remove payload and activePayloads in next major?
       payload: unknown;
       activePayloads: Record<string, unknown>[];
       dataIndex: number;
@@ -126,7 +128,15 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
     }
   };
 
-  const onClickInternal = useOnClickInternal(onClick);
+  const handleOnClick: CategoricalChartFunc = (_, e) => {
+    onClick(
+      // @ts-expect-error: enrichEventWithDetails expects a CustomEvent
+      enrichEventWithDetails(e, {
+        // @ts-expect-error: detail property exists
+        activePayloads: [e.detail.payload],
+      }),
+    );
+  };
 
   return (
     <ChartContainer
@@ -142,7 +152,7 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
       {...rest}
     >
       <RadialBarChart
-        onClick={onClickInternal}
+        onClick={handleOnClick}
         innerRadius="90%"
         outerRadius="100%"
         barSize={10}
@@ -167,8 +177,9 @@ const RadialChart = forwardRef<HTMLDivElement, RadialChartProps>((props, ref) =>
             y="50%"
             textAnchor="middle"
             dominantBaseline="middle"
-            className="progress-label"
-            style={{ ...defaultDisplayValueStyles, ...displayValueStyle }}
+            //todo: why do we need this?
+            // className="progress-label"
+            style={displayValueStyle}
           >
             {displayValue}
           </text>
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
index 20de5e21915..f1d7876c5bf 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.cy.tsx
@@ -40,7 +40,8 @@ describe('ScatterChart', () => {
       />,
     );
 
-    cy.get('[name="Users"]').eq(0).click();
+    //todo: datapoint click is broken
+    cy.get('[name="APJ"]').eq(0).realClick();
     cy.get('@onClick')
       .should('have.been.calledOnce')
       .and(
@@ -52,12 +53,12 @@ describe('ScatterChart', () => {
         }),
       );
 
-    cy.contains('Users').click();
+    cy.get('[class="recharts-legend-wrapper"]').findByText('APJ').realClick();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
       Cypress.sinon.match({
         detail: Cypress.sinon.match({
-          value: 'Users',
+          value: 'APJ',
         }),
       }),
     );
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
index 0522e63beba..f0b1d1e42ba 100644
--- a/packages/charts/src/components/ScatterChart/ScatterChart.tsx
+++ b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
@@ -168,8 +168,10 @@ const ScatterChart = forwardRef<HTMLDivElement, ScatterChartProps>((props, ref)
   const [componentRef, chartRef] = useSyncRef<any>(ref);
   const preventOnClickCall = useRef(false);
   const onItemLegendClick = useLegendItemClick(onLegendClick);
+  //todo: error on click
   const onClickInternal = useCallback(
     (payload, event) => {
+      console.log(payload);
       if (typeof onClick === 'function' && !preventOnClickCall.current) {
         onClick(
           enrichEventWithDetails(event, {
diff --git a/packages/charts/src/hooks/useLabelFormatter.ts b/packages/charts/src/hooks/useLabelFormatter.ts
index f7a1424fc46..459eb6ce0e3 100644
--- a/packages/charts/src/hooks/useLabelFormatter.ts
+++ b/packages/charts/src/hooks/useLabelFormatter.ts
@@ -1,10 +1,9 @@
 import { useCallback } from 'react';
-import type { TooltipProps } from 'recharts';
-import type { NameType, TooltipLabelFormatter, ValueType } from '../interfaces/index.js';
+import type { TooltipLabelFormatter } from '../interfaces/index.js';
 
 export const useLabelFormatter = (formatter: TooltipLabelFormatter) => {
   return useCallback<TooltipLabelFormatter>(
-    (label: TooltipProps<ValueType, NameType>['label'], payload) => {
+    (label: string | number, payload) => {
       if (typeof formatter === 'function') {
         return formatter(label, payload);
       }
diff --git a/packages/charts/src/hooks/useOnClickInternal.ts b/packages/charts/src/hooks/useOnClickInternal.ts
index 7c3f4a3cc9c..8d067aeedaa 100644
--- a/packages/charts/src/hooks/useOnClickInternal.ts
+++ b/packages/charts/src/hooks/useOnClickInternal.ts
@@ -1,17 +1,39 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
+import type { MutableRefObject } from 'react';
 import { useCallback } from 'react';
-
-export const useOnClickInternal = (onClick) =>
-  useCallback(
-    (payload, event) => {
+import type { CategoricalChartFunc } from 'recharts/types/chart/types.js';
+import type { ActivePayload, IChartBaseProps } from '../interfaces/IChartBaseProps.js';
+export const useOnClickInternal = (
+  onClick: IChartBaseProps['onClick'],
+  dataset: IChartBaseProps['dataset'],
+  activePayloadsRef: MutableRefObject<ActivePayload[]> | MutableRefObject<ActivePayload>,
+): CategoricalChartFunc => {
+  //todo: deprecate payload & activePayloads?
+  return useCallback(
+    (nextState, event) => {
       if (typeof onClick === 'function') {
+        const payload = nextState.activeIndex != null ? dataset?.[nextState.activeIndex] : undefined;
+        const activePayloads = (
+          Array.isArray(activePayloadsRef.current) ? activePayloadsRef.current : [activePayloadsRef.current]
+        ).map((item) => ({
+          ...item,
+          payload,
+          value: item.dataKey ? payload?.[item.dataKey] : undefined,
+        }));
         onClick(
+          //todo: check ts-error
+          // @ts-expect-error: check
           enrichEventWithDetails(event, {
-            payload: payload?.activePayload?.[0]?.payload,
-            activePayloads: payload?.activePayload,
+            payload,
+            activePayloads,
+            //todo: add nextState?
+            ...nextState,
           }),
         );
       }
     },
-    [onClick],
+    [onClick, dataset, activePayloadsRef],
   );
+};
+
+//todo: integrate LineChart, RadarChart click here as well?
diff --git a/packages/charts/src/interfaces/IChartBaseProps.ts b/packages/charts/src/interfaces/IChartBaseProps.ts
index 5467c97dfdf..4b7d6c9b898 100644
--- a/packages/charts/src/interfaces/IChartBaseProps.ts
+++ b/packages/charts/src/interfaces/IChartBaseProps.ts
@@ -1,8 +1,27 @@
 import type { CommonProps } from '@ui5/webcomponents-react';
 import type { ComponentType, ReactNode } from 'react';
 import type { LegendProps, TooltipProps } from 'recharts';
+import type { CategoricalChartFunc } from 'recharts/types/chart/types.js';
 import type { ICartesianChartConfig } from './ICartesianChartConfig.js';
 
+//todo: type measures
+// interface ActivePayload extends IChartMeasure{
+//  opacity?:
+// }
+
+export interface ActivePayload {
+  color: string | undefined;
+  stroke: string | undefined;
+  dataKey: string;
+  hide?: boolean | undefined;
+  name: string;
+  fillOpacity?: string | number;
+  strokeOpacity?: string | number;
+  payload: Record<string, unknown>;
+  value: number | string;
+  colors?: string[];
+}
+
 export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonProps, 'onClick'> {
   /**
    * Flag whether the chart should display a loading indicator.
@@ -37,7 +56,14 @@ export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonP
   /**
    * Fired when clicked anywhere in the chart.
    */
-  onClick?: (event: CustomEvent<{ payload: unknown; activePayloads: Record<string, unknown>[] }>) => void;
+  onClick?: (
+    event: CustomEvent<
+      Parameters<CategoricalChartFunc>[0] & {
+        payload: unknown;
+        activePayloads: ActivePayload[];
+      }
+    >,
+  ) => void;
 
   /**
    * The `onDataPointClick` event fires whenever the user clicks on e.g. a  bar in `BarChart` or a point the `LineChart`.
diff --git a/packages/charts/src/internal/ChartDataLabel.tsx b/packages/charts/src/internal/ChartDataLabel.tsx
index 757062bf830..76fa1ca5933 100644
--- a/packages/charts/src/internal/ChartDataLabel.tsx
+++ b/packages/charts/src/internal/ChartDataLabel.tsx
@@ -15,16 +15,17 @@ interface CustomDataLabelProps {
 
 export const ChartDataLabel = (props: CustomDataLabelProps) => {
   const { config, chartType, viewBox } = props;
-  if (config.hideDataLabel) {
+  //todo: viewBox is not initially available, check if this is changed in a later version
+  if (config.hideDataLabel || !viewBox) {
     return null;
   }
 
-  if (config.DataLabel) {
+  if (config.DataLabel && !!viewBox) {
     return createElement(config.DataLabel, props);
   }
 
   const formattedLabel = config.formatter(props.value ?? props.children);
-  if (chartType === 'bar' || chartType === 'column') {
+  if ((chartType === 'bar' || chartType === 'column') && !!viewBox) {
     if (Math.abs(viewBox.width) < getTextWidth(formattedLabel)) {
       return null;
     }
@@ -37,7 +38,6 @@ export const ChartDataLabel = (props: CustomDataLabelProps) => {
   if (['area', 'line', 'radar'].includes(chartType)) {
     fill = ThemingParameters.sapTextColor; // label is displayed outside of the colored element
   }
-
   return (
     <Label
       viewBox={viewBox}
diff --git a/packages/charts/src/resources/DemoProps.tsx b/packages/charts/src/resources/DemoProps.tsx
index 05be0f4e83c..7f2eb5303e2 100644
--- a/packages/charts/src/resources/DemoProps.tsx
+++ b/packages/charts/src/resources/DemoProps.tsx
@@ -269,53 +269,53 @@ export const secondaryDimensionDataSet = [
   {
     name: 'January / Month',
     users: 100,
-    dimension: 'C4S Components',
+    dimension: 'Checkout',
   },
   {
     name: 'February / Month',
-    users: 230,
-    dimension: 'C4S Components',
+    users: 180,
+    dimension: 'Checkout',
   },
   {
     name: 'March / Month',
     users: 240,
-    dimension: 'C4S Components',
+    dimension: 'Checkout',
   },
   {
     name: 'January / Month',
-    users: 20,
-    dimension: 'Harmnony Insight',
+    users: 180,
+    dimension: 'Shopping Cart',
   },
   {
-    name: 'Februar / Month',
+    name: 'February / Month',
     users: 220,
-    dimension: 'Harmnony Insight',
+    dimension: 'Shopping Cart',
   },
   {
     name: 'March / Month',
-    users: 200,
-    dimension: 'Harmnony Insight',
+    users: 250,
+    dimension: 'Shopping Cart',
   },
   {
     name: 'January / Month',
     users: 250,
-    dimension: 'Intelligent Workplace',
+    dimension: 'Entry Page',
   },
   {
     name: 'February / Month',
     users: 240,
-    dimension: 'Intelligent Workplace',
+    dimension: 'Entry Page',
   },
   {
     name: 'March / Month',
     users: 280,
-    dimension: 'Intelligent Workplace',
+    dimension: 'Entry Page',
   },
 ];
 
 export const scatterComplexDataSet = [
   {
-    label: 'Users',
+    label: 'EMEA',
     data: [
       {
         users: 120,
@@ -603,6 +603,45 @@ export const complexBulletDataset = [
   },
 ];
 
+export const radarChartDataset = [
+  {
+    name: 'Clarity',
+    alpha: 95,
+    beta: 75,
+    gamma: 52,
+  },
+  {
+    name: 'Responsiveness',
+    alpha: 90,
+    beta: 75,
+    gamma: 85,
+  },
+  {
+    name: 'Flexibility',
+    alpha: 89,
+    beta: 70,
+    gamma: 50,
+  },
+  {
+    name: 'Innovation',
+    alpha: 65,
+    beta: 78,
+    gamma: 35,
+  },
+  {
+    name: 'Reliability',
+    alpha: 85,
+    beta: 80,
+    gamma: 60,
+  },
+  {
+    name: 'Efficiency',
+    alpha: 92,
+    beta: 75,
+    gamma: 55,
+  },
+];
+
 const percentFormatter = (val) => `${val.toFixed(1)}%`;
 function normalizeData(data: Record<string, number | string>[]) {
   return data.map((item) => {
diff --git a/yarn.lock b/yarn.lock
index 4d2a2dfdcc3..0223282163c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1278,7 +1278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.6":
   version: 7.23.9
   resolution: "@babel/runtime@npm:7.23.9"
   dependencies:
@@ -2880,6 +2880,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@reduxjs/toolkit@npm:1.x.x || 2.x.x":
+  version: 2.8.2
+  resolution: "@reduxjs/toolkit@npm:2.8.2"
+  dependencies:
+    "@standard-schema/spec": "npm:^1.0.0"
+    "@standard-schema/utils": "npm:^0.3.0"
+    immer: "npm:^10.0.3"
+    redux: "npm:^5.0.1"
+    redux-thunk: "npm:^3.1.0"
+    reselect: "npm:^5.1.0"
+  peerDependencies:
+    react: ^16.9.0 || ^17.0.0 || ^18 || ^19
+    react-redux: ^7.2.1 || ^8.1.3 || ^9.0.0
+  peerDependenciesMeta:
+    react:
+      optional: true
+    react-redux:
+      optional: true
+  checksum: 10c0/6a7a33bad5f1100340757151ff86ca0c4c248f030ae56ce0e6f1d98b39fa87c8f193e9faa2ebd6d5a4c0416921e9f9f7a2bbdd81156c39f08f6bf5ce70c2b927
+  languageName: node
+  linkType: hard
+
 "@rolldown/pluginutils@npm:1.0.0-beta.27":
   version: 1.0.0-beta.27
   resolution: "@rolldown/pluginutils@npm:1.0.0-beta.27"
@@ -3197,6 +3219,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@standard-schema/spec@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@standard-schema/spec@npm:1.0.0"
+  checksum: 10c0/a1ab9a8bdc09b5b47aa8365d0e0ec40cc2df6437be02853696a0e377321653b0d3ac6f079a8c67d5ddbe9821025584b1fb71d9cc041a6666a96f1fadf2ece15f
+  languageName: node
+  linkType: hard
+
+"@standard-schema/utils@npm:^0.3.0":
+  version: 0.3.0
+  resolution: "@standard-schema/utils@npm:0.3.0"
+  checksum: 10c0/6eb74cd13e52d5fc74054df51e37d947ef53f3ab9e02c085665dcca3c38c60ece8d735cebbdf18fbb13c775fbcb9becb3f53109b0e092a63f0f7389ce0993fd0
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-a11y@npm:9.1.1":
   version: 9.1.1
   resolution: "@storybook/addon-a11y@npm:9.1.1"
@@ -4096,6 +4132,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/use-sync-external-store@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "@types/use-sync-external-store@npm:0.0.6"
+  checksum: 10c0/77c045a98f57488201f678b181cccd042279aff3da34540ad242f893acc52b358bd0a8207a321b8ac09adbcef36e3236944390e2df4fcedb556ce7bb2a88f2a8
+  languageName: node
+  linkType: hard
+
 "@types/which@npm:^1.3.2":
   version: 1.3.2
   resolution: "@types/which@npm:1.3.2"
@@ -4677,7 +4720,7 @@ __metadata:
   dependencies:
     clsx: "npm:2.1.1"
     react-content-loader: "npm:7.1.1"
-    recharts: "npm:2.15.4"
+    recharts: "npm:3.1.2"
   peerDependencies:
     "@ui5/webcomponents-react": ~2.13.0
     "@ui5/webcomponents-react-base": ~2.13.0
@@ -6939,7 +6982,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:2.1.1, clsx@npm:^2.0.0":
+"clsx@npm:2.1.1, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
@@ -7934,7 +7977,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"decimal.js-light@npm:^2.4.1":
+"decimal.js-light@npm:^2.5.1":
   version: 2.5.1
   resolution: "decimal.js-light@npm:2.5.1"
   checksum: 10c0/4fd33f535aac9e5bd832796831b65d9ec7914ad129c7437b3ab991b0c2eaaa5a57e654e6174c4a17f1b3895ea366f0c1ab4955cdcdf7cfdcf3ad5a58b456c020
@@ -8313,16 +8356,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-helpers@npm:^5.0.1":
-  version: 5.2.1
-  resolution: "dom-helpers@npm:5.2.1"
-  dependencies:
-    "@babel/runtime": "npm:^7.8.7"
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/f735074d66dd759b36b158fa26e9d00c9388ee0e8c9b16af941c38f014a37fc80782de83afefd621681b19ac0501034b4f1c4a3bff5caa1b8667f0212b5e124c
-  languageName: node
-  linkType: hard
-
 "dom-serializer@npm:^2.0.0":
   version: 2.0.0
   resolution: "dom-serializer@npm:2.0.0"
@@ -8732,6 +8765,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-toolkit@npm:^1.39.3":
+  version: 1.39.9
+  resolution: "es-toolkit@npm:1.39.9"
+  dependenciesMeta:
+    "@trivago/prettier-plugin-sort-imports@4.3.0":
+      unplugged: true
+    prettier-plugin-sort-re-exports@0.0.1:
+      unplugged: true
+  checksum: 10c0/98921f79dc8f24982ed3265e10267dc64b0e9384925005d645b0a893848eacef3b1646a91e19fd962e8c0527361dbe9aa1dddf01fbc6b816f2345201624d2474
+  languageName: node
+  linkType: hard
+
 "es6-error@npm:^4.0.1":
   version: 4.1.1
   resolution: "es6-error@npm:4.1.1"
@@ -9457,7 +9502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eventemitter3@npm:^4.0.1, eventemitter3@npm:^4.0.4":
+"eventemitter3@npm:^4.0.4":
   version: 4.0.7
   resolution: "eventemitter3@npm:4.0.7"
   checksum: 10c0/5f6d97cbcbac47be798e6355e3a7639a84ee1f7d9b199a07017f1d2f1e2fe236004d14fa5dfaeba661f94ea57805385e326236a6debbc7145c8877fbc0297c6b
@@ -9680,13 +9725,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-equals@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "fast-equals@npm:5.0.1"
-  checksum: 10c0/d7077b8b681036c2840ed9860a3048e44fc268fad2b525b8f25b43458be0c8ad976152eb4b475de9617170423c5b802121ebb61ed6641c3ac035fadaf805c8c0
-  languageName: node
-  linkType: hard
-
 "fast-glob@npm:^3.1.1, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -11230,6 +11268,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"immer@npm:^10.0.3, immer@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "immer@npm:10.1.1"
+  checksum: 10c0/b749e10d137ccae91788f41bd57e9387f32ea6d6ea8fd7eb47b23fd7766681575efc7f86ceef7fe24c3bc9d61e38ff5d2f49c2663b2b0c056e280a4510923653
+  languageName: node
+  linkType: hard
+
 "import-fresh@npm:^3.0.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
@@ -16929,7 +16974,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.6.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -17181,6 +17226,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-redux@npm:8.x.x || 9.x.x":
+  version: 9.2.0
+  resolution: "react-redux@npm:9.2.0"
+  dependencies:
+    "@types/use-sync-external-store": "npm:^0.0.6"
+    use-sync-external-store: "npm:^1.4.0"
+  peerDependencies:
+    "@types/react": ^18.2.25 || ^19
+    react: ^18.0 || ^19
+    redux: ^5.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    redux:
+      optional: true
+  checksum: 10c0/00d485f9d9219ca1507b4d30dde5f6ff8fb68ba642458f742e0ec83af052f89e65cd668249b99299e1053cc6ad3d2d8ac6cb89e2f70d2ac5585ae0d7fa0ef259
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.17.0":
   version: 0.17.0
   resolution: "react-refresh@npm:0.17.0"
@@ -17188,20 +17252,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-smooth@npm:^4.0.4":
-  version: 4.0.4
-  resolution: "react-smooth@npm:4.0.4"
-  dependencies:
-    fast-equals: "npm:^5.0.1"
-    prop-types: "npm:^15.8.1"
-    react-transition-group: "npm:^4.4.5"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/d94cb27f808721ec040d320ca1927919199495fd212e54eb9dc8ee3f73ff1d808a34be9f4b09fe49b01f411ac2387fdf0e4bee297f18faf56f94bfbef5fd204c
-  languageName: node
-  linkType: hard
-
 "react-table@npm:7.8.0":
   version: 7.8.0
   resolution: "react-table@npm:7.8.0"
@@ -17211,21 +17261,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-transition-group@npm:^4.4.5":
-  version: 4.4.5
-  resolution: "react-transition-group@npm:4.4.5"
-  dependencies:
-    "@babel/runtime": "npm:^7.5.5"
-    dom-helpers: "npm:^5.0.1"
-    loose-envify: "npm:^1.4.0"
-    prop-types: "npm:^15.6.2"
-  peerDependencies:
-    react: ">=16.6.0"
-    react-dom: ">=16.6.0"
-  checksum: 10c0/2ba754ba748faefa15f87c96dfa700d5525054a0141de8c75763aae6734af0740e77e11261a1e8f4ffc08fd9ab78510122e05c21c2d79066c38bb6861a886c82
-  languageName: node
-  linkType: hard
-
 "react@npm:19.1.1":
   version: 19.1.1
   resolution: "react@npm:19.1.1"
@@ -17446,31 +17481,26 @@ __metadata:
   languageName: node
   linkType: hard
 
-"recharts-scale@npm:^0.4.4":
-  version: 0.4.5
-  resolution: "recharts-scale@npm:0.4.5"
-  dependencies:
-    decimal.js-light: "npm:^2.4.1"
-  checksum: 10c0/64ce1fc4ebe62001787bf4dc4cbb779452d33831619309c71c50277c58e8968ffe98941562d9d0d5ffdb02588ebd62f4fe6548fa826110fd458db9c3cc6dadc1
-  languageName: node
-  linkType: hard
-
-"recharts@npm:2.15.4":
-  version: 2.15.4
-  resolution: "recharts@npm:2.15.4"
+"recharts@npm:3.1.2":
+  version: 3.1.2
+  resolution: "recharts@npm:3.1.2"
   dependencies:
-    clsx: "npm:^2.0.0"
-    eventemitter3: "npm:^4.0.1"
-    lodash: "npm:^4.17.21"
-    react-is: "npm:^18.3.1"
-    react-smooth: "npm:^4.0.4"
-    recharts-scale: "npm:^0.4.4"
-    tiny-invariant: "npm:^1.3.1"
-    victory-vendor: "npm:^36.6.8"
+    "@reduxjs/toolkit": "npm:1.x.x || 2.x.x"
+    clsx: "npm:^2.1.1"
+    decimal.js-light: "npm:^2.5.1"
+    es-toolkit: "npm:^1.39.3"
+    eventemitter3: "npm:^5.0.1"
+    immer: "npm:^10.1.1"
+    react-redux: "npm:8.x.x || 9.x.x"
+    reselect: "npm:5.1.1"
+    tiny-invariant: "npm:^1.3.3"
+    use-sync-external-store: "npm:^1.2.2"
+    victory-vendor: "npm:^37.0.2"
   peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/45bf1e1f56d881696aa55c1a019f16dee559b46d0024254584424d518e7f2887eb76e8ac22a203d02939fbbeabd2c297fc55c0c5a6534879d60f5caad8a97f37
+    react-is: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/daf04d57a622086e9950a4e4de75b5a8713e3e37401b88373da30efd1618e83de01027ffb9069e076b516fc274954e920ce2f221228a901ca82c6f70fd6a4046
   languageName: node
   linkType: hard
 
@@ -17493,6 +17523,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"redux-thunk@npm:^3.1.0":
+  version: 3.1.0
+  resolution: "redux-thunk@npm:3.1.0"
+  peerDependencies:
+    redux: ^5.0.0
+  checksum: 10c0/21557f6a30e1b2e3e470933247e51749be7f1d5a9620069a3125778675ce4d178d84bdee3e2a0903427a5c429e3aeec6d4df57897faf93eb83455bc1ef7b66fd
+  languageName: node
+  linkType: hard
+
+"redux@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "redux@npm:5.0.1"
+  checksum: 10c0/b10c28357194f38e7d53b760ed5e64faa317cc63de1fb95bc5d9e127fab956392344368c357b8e7a9bedb0c35b111e7efa522210cfdc3b3c75e5074718e9069c
+  languageName: node
+  linkType: hard
+
 "reflect.getprototypeof@npm:^1.0.6, reflect.getprototypeof@npm:^1.0.9":
   version: 1.0.10
   resolution: "reflect.getprototypeof@npm:1.0.10"
@@ -17742,6 +17788,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reselect@npm:5.1.1, reselect@npm:^5.1.0":
+  version: 5.1.1
+  resolution: "reselect@npm:5.1.1"
+  checksum: 10c0/219c30da122980f61853db3aebd173524a2accd4b3baec770e3d51941426c87648a125ca08d8c57daa6b8b086f2fdd2703cb035dd6231db98cdbe1176a71f489
+  languageName: node
+  linkType: hard
+
 "resolve-alpn@npm:^1.0.0":
   version: 1.2.1
   resolution: "resolve-alpn@npm:1.2.1"
@@ -19243,7 +19296,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tiny-invariant@npm:^1.3.1, tiny-invariant@npm:^1.3.3":
+"tiny-invariant@npm:^1.3.3":
   version: 1.3.3
   resolution: "tiny-invariant@npm:1.3.3"
   checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
@@ -20225,6 +20278,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.2.2, use-sync-external-store@npm:^1.4.0":
+  version: 1.5.0
+  resolution: "use-sync-external-store@npm:1.5.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 10c0/1b8663515c0be34fa653feb724fdcce3984037c78dd4a18f68b2c8be55cc1a1084c578d5b75f158d41b5ddffc2bf5600766d1af3c19c8e329bb20af2ec6f52f4
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:^1.0.2, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -20411,9 +20473,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"victory-vendor@npm:^36.6.8":
-  version: 36.6.8
-  resolution: "victory-vendor@npm:36.6.8"
+"victory-vendor@npm:^37.0.2":
+  version: 37.3.6
+  resolution: "victory-vendor@npm:37.3.6"
   dependencies:
     "@types/d3-array": "npm:^3.0.3"
     "@types/d3-ease": "npm:^3.0.0"
@@ -20429,7 +20491,7 @@ __metadata:
     d3-shape: "npm:^3.1.0"
     d3-time: "npm:^3.0.0"
     d3-timer: "npm:^3.0.1"
-  checksum: 10c0/72dd8355f706879eb6a01a8ecba7bde8d99aa3acb748111ccf498dc71a7258a03154b5c2ae72f36fb4ec775e7554fabeb3e3dd1c4c3487126b09654f7f038423
+  checksum: 10c0/0a9628db30b898160409628f26d457ba15adc86472531817d73fbeb847de498d94f91dee5f4caa969195744e91be93e100eeff7a392b591ac5349343a36dec29
   languageName: node
   linkType: hard