Stacked Bar Charts Label show wrong value

[arigon]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Creating a stacked Bar Chart and enable label attribute.

What is expected?

Showing the value of each stacked bar

What is actually happening?

It shows the correct value of the first stacked bar, but it shows the sum of the first value and the value of the second stack in the second one. The same with the third one: it shows the sum of all three bars instead of only one.

Environment	Info
Recharts	v1.8.5
React	16.8.2
System	MacOS
Browser	Chrome

[mwskwong]

You are talking about Stacked Bar Charts but your codesandbox has a Line Chart example...

[arigon]

You are talking about Stacked Bar Charts but your codesandbox has a Line Chart example...

Ah, sorry. I thought codesandbox is saving changes automatically. Now it should be working. :-)

[mariopeixoto]

Same issue here... looks like when the bar is stacked, the label is being rendered as the sum of all the values below that item instead of the individual values...

[mariopeixoto]

Here is a workaround:

const valueAccessor = attribute => ({ payload }) => {
  return payload[attribute];
};

....
      <Bar dataKey="0" stackId="a" fill="#8884d8">
        <LabelList valueAccessor={valueAccessor("0")} />
      </Bar>
      <Bar dataKey="1" stackId="a" fill="#82ca9d">
        <LabelList valueAccessor={valueAccessor("1")} />
      </Bar>
      <Bar dataKey="2" stackId="a" fill="#82ca9d">
        <LabelList valueAccessor={valueAccessor("2")} />
      </Bar>
...

On codesandbox:
https://codesandbox.io/s/recharts-issue-template-70kry