From ca653b60aeaad1e363dcf93841c473895c222b04 Mon Sep 17 00:00:00 2001
From: Marcus Notheis <marcus.notheis@sap.com>
Date: Fri, 19 Jun 2020 14:50:12 +0200
Subject: [PATCH] fix(BarChart/ColumnChart): fix data labels for nested data
 accessors

---
 packages/charts/src/components/BarChart/BarChart.tsx      | 8 +++++---
 .../charts/src/components/ColumnChart/ColumnChart.tsx     | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/charts/src/components/BarChart/BarChart.tsx b/packages/charts/src/components/BarChart/BarChart.tsx
index 1767bba1a0e..ea0ecd697c8 100644
--- a/packages/charts/src/components/BarChart/BarChart.tsx
+++ b/packages/charts/src/components/BarChart/BarChart.tsx
@@ -20,6 +20,7 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { useLongestYAxisLabelBar } from '../../hooks/useLongestYAxisLabelBar';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
@@ -40,6 +41,10 @@ const measureDefaults = {
   opacity: 1
 };
 
+const valueAccessor = (attribute) => ({ payload }) => {
+  return getValueByDataKey(payload, attribute);
+};
+
 interface MeasureConfig extends IChartMeasure {
   /**
    * Bar Width
@@ -164,9 +169,6 @@ const BarChart: FC<BarChartProps> = forwardRef((props: BarChartProps, ref: Ref<a
   const [width, legendPosition] = useLongestYAxisLabelBar(dataset, dimensions);
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const [xAxisHeight] = useObserveXAxisHeights(chartRef, 1);
-  const valueAccessor = (attribute) => ({ payload }) => {
-    return payload[attribute];
-  };
 
   return (
     <ChartContainer
diff --git a/packages/charts/src/components/ColumnChart/ColumnChart.tsx b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
index ac385a47483..67b1e9da83e 100644
--- a/packages/charts/src/components/ColumnChart/ColumnChart.tsx
+++ b/packages/charts/src/components/ColumnChart/ColumnChart.tsx
@@ -20,6 +20,7 @@ import {
   XAxis,
   YAxis
 } from 'recharts';
+import { getValueByDataKey } from 'recharts/lib/util/ChartUtils';
 import { useChartMargin } from '../../hooks/useChartMargin';
 import { useLongestYAxisLabel } from '../../hooks/useLongestYAxisLabel';
 import { useObserveXAxisHeights } from '../../hooks/useObserveXAxisHeights';
@@ -88,6 +89,10 @@ const measureDefaults = {
   opacity: 1
 };
 
+const valueAccessor = (attribute) => ({ payload }) => {
+  return getValueByDataKey(payload, attribute);
+};
+
 /**
  * <code>import { ColumnChart } from '@ui5/webcomponents-react-charts/lib/ColumnChart';</code>
  */
@@ -169,9 +174,6 @@ const ColumnChart: FC<ColumnChartProps> = forwardRef((props: ColumnChartProps, r
 
   const marginChart = useChartMargin(chartConfig.margin, chartConfig.zoomingTool);
   const xAxisHeights = useObserveXAxisHeights(chartRef, props.dimensions.length);
-  const valueAccessor = (attribute) => ({ payload }) => {
-    return payload[attribute];
-  };
 
   return (
     <ChartContainer