From b0cdc296f170b2a6362f3e3ced46298da208f5fc Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 14 Jul 2025 12:32:39 +0000
Subject: [PATCH 1/3] fix(deps): update dependency recharts to v3

---
 packages/charts/package.json |   2 +-
 yarn.lock                    | 239 ++++++++++++++++++++---------------
 2 files changed, 140 insertions(+), 101 deletions(-)

diff --git a/packages/charts/package.json b/packages/charts/package.json
index e84057dd73f..f6794d99d84 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.0"
   },
   "peerDependencies": {
     "@ui5/webcomponents-react": "~2.12.0",
diff --git a/yarn.lock b/yarn.lock
index c38b83c0deb..e85a103a56b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2099,15 +2099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.8.7":
-  version: 7.23.9
-  resolution: "@babel/runtime@npm:7.23.9"
-  dependencies:
-    regenerator-runtime: "npm:^0.14.0"
-  checksum: 10c0/e71205fdd7082b2656512cc98e647d9ea7e222e4fe5c36e9e5adc026446fcc3ba7b3cdff8b0b694a0b78bb85db83e7b1e3d4c56ef90726682b74f13249cf952d
-  languageName: node
-  linkType: hard
-
 "@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
@@ -4368,6 +4359,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.19":
   version: 1.0.0-beta.19
   resolution: "@rolldown/pluginutils@npm:1.0.0-beta.19"
@@ -4804,6 +4817,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:8.6.14":
   version: 8.6.14
   resolution: "@storybook/addon-a11y@npm:8.6.14"
@@ -6028,6 +6055,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/uuid@npm:^9.0.1":
   version: 9.0.7
   resolution: "@types/uuid@npm:9.0.7"
@@ -6591,7 +6625,7 @@ __metadata:
   dependencies:
     clsx: "npm:2.1.1"
     react-content-loader: "npm:7.1.1"
-    recharts: "npm:2.15.4"
+    recharts: "npm:3.1.0"
   peerDependencies:
     "@ui5/webcomponents-react": ~2.12.0
     "@ui5/webcomponents-react-base": ~2.12.0
@@ -9231,20 +9265,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clsx@npm:2.1.1":
+"clsx@npm:2.1.1, clsx@npm:^2.1.1":
   version: 2.1.1
   resolution: "clsx@npm:2.1.1"
   checksum: 10c0/c4c8eb865f8c82baab07e71bfa8897c73454881c4f99d6bc81585aecd7c441746c1399d08363dc096c550cceaf97bd4ce1e8854e1771e9998d9f94c4fe075839
   languageName: node
   linkType: hard
 
-"clsx@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "clsx@npm:2.0.0"
-  checksum: 10c0/c09f43b3144a0b7826b6b11b6a111b2c7440831004eecc02d333533c5e58ef0aa5f2dce071d3b25fbb8c8ea97b45df96c74bcc1d51c8c2027eb981931107b0cd
-  languageName: node
-  linkType: hard
-
 "cmd-shim@npm:6.0.3, cmd-shim@npm:^6.0.0":
   version: 6.0.3
   resolution: "cmd-shim@npm:6.0.3"
@@ -10291,7 +10318,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
@@ -10730,16 +10757,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"
@@ -11525,6 +11542,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-toolkit@npm:^1.39.3":
+  version: 1.39.7
+  resolution: "es-toolkit@npm:1.39.7"
+  dependenciesMeta:
+    "@trivago/prettier-plugin-sort-imports@4.3.0":
+      unplugged: true
+    prettier-plugin-sort-re-exports@0.0.1:
+      unplugged: true
+  checksum: 10c0/dde082b76d22430bdef383bf60abb893ec4ebb50da9a900005e9b57481837b9118398897670cf33c5cdf473375345dc1e897820ede4ee58482407e9626b67ba3
+  languageName: node
+  linkType: hard
+
 "es6-error@npm:^4.0.1":
   version: 4.1.1
   resolution: "es6-error@npm:4.1.1"
@@ -12444,7 +12473,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
@@ -12667,13 +12696,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.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -14525,6 +14547,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"
@@ -20962,7 +20991,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:
@@ -21203,6 +21232,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"
@@ -21210,20 +21258,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"
@@ -21233,21 +21267,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.0, react@npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0":
   version: 19.1.0
   resolution: "react@npm:19.1.0"
@@ -21474,31 +21493,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.0":
+  version: 3.1.0
+  resolution: "recharts@npm:3.1.0"
   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/87caca9dec962ff85073590fb39a004dfc827648e51ec0039e1b0c21569a3c7b52896d904508309e7cdb87d5806e974629fc7c35f06720a664dfda27b62d7bde
   languageName: node
   linkType: hard
 
@@ -21521,6 +21535,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"
@@ -21569,13 +21599,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.14.0":
-  version: 0.14.0
-  resolution: "regenerator-runtime@npm:0.14.0"
-  checksum: 10c0/e25f062c1a183f81c99681691a342760e65c55e8d3a4d4fe347ebe72433b123754b942b70b622959894e11f8a9131dc549bd3c9a5234677db06a4af42add8d12
-  languageName: node
-  linkType: hard
-
 "regexp.prototype.flags@npm:^1.4.3":
   version: 1.4.3
   resolution: "regexp.prototype.flags@npm:1.4.3"
@@ -21845,6 +21868,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"
@@ -24940,6 +24970,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"
@@ -25148,9 +25187,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"
@@ -25166,7 +25205,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
 

From 9b2e92962600ee9e2f3f3fa419cd8f5508fa0b11 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Thu, 17 Jul 2025 08:25:29 +0200
Subject: [PATCH 2/3] feat(charts): update `recharts` to v3

---
 .../components/BarChart/BarChart.stories.tsx  | 13 +++-
 .../src/components/BarChart/BarChart.tsx      | 17 +----
 .../BulletChart/BulletChart.stories.tsx       | 13 +++-
 .../components/BulletChart/BulletChart.tsx    |  2 -
 .../components/ColumnChart/ColumnChart.tsx    | 15 +----
 .../src/components/ComposedChart/index.tsx    | 12 +---
 .../src/components/LineChart/LineChart.tsx    |  3 +-
 .../src/components/PieChart/PieChart.tsx      | 15 +++--
 .../src/components/RadarChart/RadarChart.mdx  |  4 +-
 .../RadarChart/RadarChart.stories.tsx         | 49 +++++---------
 .../src/components/RadarChart/RadarChart.tsx  |  2 -
 .../charts/src/internal/ChartDataLabel.tsx    |  8 +--
 packages/charts/src/resources/DemoProps.tsx   | 67 +++++++++++++++----
 13 files changed, 116 insertions(+), 104 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.stories.tsx b/packages/charts/src/components/BarChart/BarChart.stories.tsx
index 303615df163..6fb4209984b 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 9d7a1bc9bbd..3fe25d2405f 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -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';
@@ -48,12 +47,6 @@ const measureDefaults = {
   opacity: 1,
 };
 
-const valueAccessor =
-  (attribute) =>
-  ({ payload }) => {
-    return getValueByDataKey(payload, attribute);
-  };
-
 interface MeasureConfig extends IChartMeasure {
   /**
    * Bar Width
@@ -284,8 +277,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             tickLine={{
               stroke: chartConfig.secondYAxis.color ?? `var(--sapChart_OrderedColor_${(colorSecondY % 12) + 1})`,
             }}
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
             label={{ value: chartConfig.secondYAxis.name, offset: 2, angle: +90, position: 'center' }}
             orientation="top"
             interval={0}
@@ -328,16 +319,13 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
                 fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
                 stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
                 barSize={element.width}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 onClick={onDataPointClickInternal}
                 isAnimationActive={!noAnimation}
                 onAnimationStart={handleBarAnimationStart}
                 onAnimationEnd={handleBarAnimationEnd}
               >
                 <LabelList
-                  data={dataset}
-                  valueAccessor={valueAccessor(element.accessor)}
+                  dataKey={element.accessor}
                   content={<ChartDataLabel config={element} chartType="bar" position={'insideRight'} />}
                 />
                 {dataset.map((data, i) => {
@@ -353,8 +341,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
             );
           })}
         {!noLegend && (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           <Legend
             verticalAlign={chartConfig.legendPosition}
             align={chartConfig.legendHorizontalAlign}
@@ -371,7 +357,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.stories.tsx b/packages/charts/src/components/BulletChart/BulletChart.stories.tsx
index 1d0f864638b..6b7616688d8 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 4d9b6c22d7d..ff521e2a6d4 100644
--- a/packages/charts/src/components/BulletChart/BulletChart.tsx
+++ b/packages/charts/src/components/BulletChart/BulletChart.tsx
@@ -431,8 +431,6 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((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/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index f9d82c656c2..37381ff3277 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -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';
@@ -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.
  */
@@ -310,6 +303,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
           measures.map((element, index) => {
             return (
               <Column
+                // todo: multiple `yAxisId`s cause the Cartesian Grid to break
                 yAxisId={chartConfig.secondYAxis?.dataKey === element.accessor ? 'right' : 'left'}
                 stackId={element.stackId}
                 fillOpacity={element.opacity}
@@ -321,16 +315,13 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
                 fill={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
                 stroke={element.color ?? `var(--sapChart_OrderedColor_${(index % 12) + 1})`}
                 barSize={element.width}
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 onClick={onDataPointClickInternal}
                 isAnimationActive={!noAnimation}
                 onAnimationStart={handleBarAnimationStart}
                 onAnimationEnd={handleBarAnimationEnd}
               >
                 <LabelList
-                  data={dataset}
-                  valueAccessor={valueAccessor(element.accessor)}
+                  dataKey={element.accessor}
                   content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
                 />
                 {dataset.map((data, i) => {
@@ -346,8 +337,6 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((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/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index eeba95b6a9d..1a0ad37d561 100644
--- a/packages/charts/src/components/ComposedChart/index.tsx
+++ b/packages/charts/src/components/ComposedChart/index.tsx
@@ -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';
@@ -204,12 +203,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') {
@@ -435,8 +428,6 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
           />
         )}
         {!noLegend && (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           <Legend
             verticalAlign={chartConfig.legendPosition}
             align={chartConfig.legendHorizontalAlign}
@@ -510,8 +501,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               {element.type === 'bar' && (
                 <>
                   <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/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index 13394e8d4ad..cbb8805b727 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -265,6 +265,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"
           tickFormatter={primaryMeasure?.formatter}
           interval={0}
@@ -320,8 +321,6 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((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/PieChart/PieChart.tsx b/packages/charts/src/components/PieChart/PieChart.tsx
index 3df798bfaf2..7b21dec6c4c 100644
--- a/packages/charts/src/components/PieChart/PieChart.tsx
+++ b/packages/charts/src/components/PieChart/PieChart.tsx
@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
 import { cloneElement, forwardRef, isValidElement, useCallback, useMemo } from 'react';
 import {
   Cell,
+  Curve,
   Label as RechartsLabel,
   Legend,
   Pie,
@@ -253,8 +254,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],
   );
@@ -311,7 +314,6 @@ const PieChart = forwardRef<HTMLDivElement, PieChartProps>((props, ref) => {
           isAnimationActive={!noAnimation}
           labelLine={renderLabelLine}
           label={dataLabel}
-          activeIndex={chartConfig.activeSegment}
           activeShape={chartConfig.activeSegment != null && renderActiveShape}
           rootTabIndex={-1}
         >
@@ -335,14 +337,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 && (
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
           <Legend
             verticalAlign={chartConfig.legendPosition}
             align={chartConfig.legendHorizontalAlign}
             onClick={onItemLegendClick}
             wrapperStyle={legendWrapperStyle}
+            itemSorter={'dataKey'}
             {...chartConfig.legendConfig}
           />
         )}
diff --git a/packages/charts/src/components/RadarChart/RadarChart.mdx b/packages/charts/src/components/RadarChart/RadarChart.mdx
index 1301368bb9b..6cba8dff024 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 4ab80c9fd20..757d6bd903d 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';
-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 5cd6f6174b2..0e94a1e5418 100644
--- a/packages/charts/src/components/RadarChart/RadarChart.tsx
+++ b/packages/charts/src/components/RadarChart/RadarChart.tsx
@@ -217,8 +217,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/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 5bb60c72c7f..aa5e7885b26 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) => {

From 84f77766992c2dc82d4939c414eddc4f3946eb89 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Fri, 18 Jul 2025 16:29:02 +0200
Subject: [PATCH 3/3] fix `onClick` event properties of BarChart, ColumnChart,
 ComposedChart

---
 .../src/components/BarChart/BarChart.tsx      | 30 ++++++----
 .../components/BulletChart/BulletChart.tsx    |  8 ++-
 .../components/ColumnChart/ColumnChart.tsx    | 32 +++++++----
 .../ComposedChart/ComposedChart.cy.tsx        |  4 +-
 .../src/components/ComposedChart/index.tsx    | 38 +++++++++----
 .../src/components/LineChart/LineChart.tsx    |  2 +
 .../src/components/RadarChart/RadarChart.tsx  |  2 +
 .../components/RadialChart/RadialChart.tsx    |  1 +
 .../components/ScatterChart/ScatterChart.tsx  |  2 +
 .../charts/src/hooks/useOnClickInternal.ts    | 55 ++++++++++++++++---
 .../charts/src/interfaces/IChartBaseProps.ts  | 27 ++++++++-
 11 files changed, 159 insertions(+), 42 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 3fe25d2405f..6a06643add4 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,
@@ -26,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';
@@ -158,7 +158,6 @@ const BarChart = forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
     ...props.chartConfig,
   };
   const referenceLine = chartConfig.referenceLine;
-
   const { dimensions, measures } = usePrepareDimensionsAndMeasures(
     props.dimensions,
     props.measures,
@@ -180,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 labelFormatter = useLabelFormatter(primaryDimension);
 
@@ -203,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;
@@ -307,17 +306,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}
diff --git a/packages/charts/src/components/BulletChart/BulletChart.tsx b/packages/charts/src/components/BulletChart/BulletChart.tsx
index ff521e2a6d4..04b32018041 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,6 +172,7 @@ const BulletChart = forwardRef<HTMLDivElement, BulletChartProps>((props, ref) =>
     dimensionDefaults,
     measureDefaults,
   );
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
 
   const sortedMeasures = useMemo(() => {
     return measures.sort((measure) => {
@@ -239,7 +240,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 37381ff3277..0568e80dc9e 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,
@@ -26,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';
@@ -175,6 +175,7 @@ const ColumnChart = forwardRef<HTMLDivElement, ColumnChartProps>((props, ref) =>
 
   const labelFormatter = useLabelFormatter(primaryDimension);
   const [componentRef, chartRef] = useSyncRef<any>(ref);
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
 
   const dataKeys = measures.map(({ accessor }) => accessor);
   const colorSecondY = chartConfig.secondYAxis
@@ -203,7 +204,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;
@@ -301,19 +302,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
-                // todo: multiple `yAxisId`s cause the Cartesian Grid to break
-                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}
diff --git a/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx b/packages/charts/src/components/ComposedChart/ComposedChart.cy.tsx
index e1b0505d481..3084911a1df 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,6 +69,7 @@ describe('ComposedChart', () => {
         }),
       );
 
+    //todo: onLegendClick is never fired, check why
     cy.contains('Users').click();
     cy.get('@onLegendClick').should(
       'have.been.calledWith',
diff --git a/packages/charts/src/components/ComposedChart/index.tsx b/packages/charts/src/components/ComposedChart/index.tsx
index 1a0ad37d561..566095b0843 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,
@@ -27,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';
@@ -188,6 +188,7 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
     measureDefaults,
   );
 
+  const activePayloadsRef = useRef<ActivePayload[]>(measures);
   const tooltipValueFormatter = useTooltipFormatter(measures);
 
   const primaryDimension = dimensions[0];
@@ -238,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;
@@ -438,11 +439,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':
@@ -452,9 +464,12 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               chartElementProps.strokeWidth = element.width;
               chartElementProps.strokeOpacity = element.opacity;
               chartElementProps.dot = element.showDot ?? !isBigDataSet;
+
+              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;
@@ -475,6 +490,9 @@ const ComposedChart = forwardRef<HTMLDivElement, ComposedChartProps>((props, ref
               chartElementProps.activeDot = {
                 onClick: onDataPointClickInternal,
               };
+
+              activePayloadsRef.current[index].fillOpacity = 0.3;
+              activePayloadsRef.current[index].strokeOpacity = opacity;
               break;
           }
 
@@ -486,22 +504,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
-                    dataKey={element.accessor}
+                    dataKey={dataKey}
                     content={<ChartDataLabel config={element} chartType="column" position={'insideTop'} />}
                   />
                   {dataset.map((data, i) => {
diff --git a/packages/charts/src/components/LineChart/LineChart.tsx b/packages/charts/src/components/LineChart/LineChart.tsx
index cbb8805b727..67a4637fb46 100644
--- a/packages/charts/src/components/LineChart/LineChart.tsx
+++ b/packages/charts/src/components/LineChart/LineChart.tsx
@@ -180,6 +180,8 @@ const LineChart = forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
 
   const onItemLegendClick = useLegendItemClick(onLegendClick);
   const preventOnClickCall = useRef(0);
+
+  //todo: check this
   const onDataPointClickInternal = useCallback(
     (payload, eventOrIndex) => {
       if (eventOrIndex.dataKey && typeof onDataPointClick === 'function') {
diff --git a/packages/charts/src/components/RadarChart/RadarChart.tsx b/packages/charts/src/components/RadarChart/RadarChart.tsx
index 0e94a1e5418..ba44ff5d08a 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, {
diff --git a/packages/charts/src/components/RadialChart/RadialChart.tsx b/packages/charts/src/components/RadialChart/RadialChart.tsx
index 8cdcd7eafe7..a28532d3012 100644
--- a/packages/charts/src/components/RadialChart/RadialChart.tsx
+++ b/packages/charts/src/components/RadialChart/RadialChart.tsx
@@ -57,6 +57,7 @@ export interface RadialChartProps
    */
   onClick?: (
     event: CustomEvent<{
+      // todo: map new values to old ones to prevent breaking changes
       payload: unknown;
       activePayloads: Record<string, unknown>[];
       dataIndex: number;
diff --git a/packages/charts/src/components/ScatterChart/ScatterChart.tsx b/packages/charts/src/components/ScatterChart/ScatterChart.tsx
index 0db5cee1e51..31150648782 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/useOnClickInternal.ts b/packages/charts/src/hooks/useOnClickInternal.ts
index 7c3f4a3cc9c..8b9a92c8b5c 100644
--- a/packages/charts/src/hooks/useOnClickInternal.ts
+++ b/packages/charts/src/hooks/useOnClickInternal.ts
@@ -1,17 +1,58 @@
 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[]>,
+): CategoricalChartFunc => {
+  //todo: deprecate payload & activePayloads?
+  return useCallback(
+    (nextState, event) => {
       if (typeof onClick === 'function') {
+        const payload = nextState.activeIndex != null ? dataset?.[nextState.activeIndex] : undefined;
+        const activePayloads = activePayloadsRef.current.map((item) => ({
+          ...item,
+          payload,
+          value: item.dataKey ? payload?.[item.dataKey] : undefined,
+        }));
+        console.log('click enriched');
         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?
+
+//bar, bullet, column, withTrend, composed, donut, line, pie, radial, scatter
+//activeCoordinate
+// :
+// {x: 746, y: 243.2412109375}
+// activeDataKey
+// :
+// undefined
+// activeIndex
+// :
+// "8"
+// activeLabel
+// :
+// "September"
+// activeTooltipIndex
+// :
+// "8"
+// isTooltipActive
+// :
+// true
diff --git a/packages/charts/src/interfaces/IChartBaseProps.ts b/packages/charts/src/interfaces/IChartBaseProps.ts
index 5467c97dfdf..c032abd2898 100644
--- a/packages/charts/src/interfaces/IChartBaseProps.ts
+++ b/packages/charts/src/interfaces/IChartBaseProps.ts
@@ -1,8 +1,26 @@
 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;
+  stroke: string;
+  dataKey: string;
+  hide: boolean;
+  name: string;
+  fillOpacity: string | number;
+  strokeOpacity: string | number;
+  payload: Record<string, unknown>;
+  value: number | string;
+}
+
 export interface IChartBaseProps<T = ICartesianChartConfig> extends Omit<CommonProps, 'onClick'> {
   /**
    * Flag whether the chart should display a loading indicator.
@@ -37,7 +55,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`.

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://github.com/SAP/ui5-webcomponents-react/compare/SAP:c8a66a7...SAP:84f7776.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://github.com/SAP/ui5-webcomponents-react/compare/SAP:c8a66a7...SAP:84f7776.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://github.com/SAP/ui5-webcomponents-react/compare/SAP:c8a66a7...SAP:84f7776.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://github.com/SAP/ui5-webcomponents-react/compare/SAP:c8a66a7...SAP:84f7776.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>