AreaChart and its color problem

[artemklishch]

Hello!
When I render the "AreaChart" chart in list via "map" method I meet the problem.
The array contains the different colors for every item. But when charts are rendered - they have the color of the first item of array (but every item certainly has its own different color).
Only lines (I mean - strokes) themselves have correct colors, but area below lines - the colors of the first item.
I can't explain it and can't resolve the issue. I suspect that the tag "defs" by some way remembers the color value that the first item has, and then it is not updated on next iterations.
Because renderings the list of another chart types of the "Recharts" library don't have this problem. And lines themselves as I said, have correct colors.
Has anybody met the same case?
Could anybody advise how to resolve it?
Thank you!

[ckifer]

Hi,

Can you represent your issue in this codesandbox template?
https://codesandbox.io/s/simple-area-chart-forked-s1q6si

[ckifer]

Can you modify the sandbox to represent your exact problem? I don't see any gradients in the example

[artemklishch]

I am sorry
I couldn't insert the correct link here

This one:
https://codesandbox.io/s/simple-area-chart-forked-jcgrnx?file=/src/App.tsx

with linear gradient

[ckifer]

Here you are https://codesandbox.io/s/simple-area-chart-forked-95v887

Same issue as #3461

You need a unique ID for each linear gradient

[artemklishch]

Thank you so much!

[ckifer]

np!

[ckifer]

Answering here to mark as answer

https://codesandbox.io/s/simple-area-chart-forked-95v887

Same issue as #3461

OP needed a unique ID for each linear gradient created in a loop