[charts] Fix grid duplicated key

[alexfauquette]

Fix #12197

[mui-bot]

Deploy preview: https://deploy-preview-12208--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 1469ecd

[LukasTy]

LGTM. 👌
Nitpick: Have you considered making the direction as suffix? 🤔
I.e.: ${formattedValue}-horizontal.

[alexfauquette]

Nitpick: Have you considered making the direction as suffix? 🤔

Is their an interest? I considered the solution of adding a group <g> arround horizontal lines, and another one arround vertical lines such that keys could be the same.

But I did not considered a lot options about key naming. For me it's purely a technical aspect for React, not for dev, but I might be missing a use case

[LukasTy]

But I did not considered a lot options about key naming. For me it's purely a technical aspect for React, not for dev, but I might be missing a use case

No, I also don't have a concrete example of why going with a suffix rather than a prefix would be arguably superior.
Just a matter of preference. 👌