[charts] Fix area order when overlapping

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!

3.85k stars 1.15k forks source link

Fix #13067

I would still discourage the use of overlapping areas except for very specific edge case (such the one in the issue) 🙈

With no structure

With guarantee some series are always smaller than others

I introduced this reverse when creating the animation, otherwise you get a weird state with the line and the area not in sync, just because the area on top of you is overlapping (the time it finishes its animation too)

This fix applies the reverse on staking groups instead of all series.

For staked series, they do not overflow so we can reverse the series order
For non-stacked series, we do not apply the reverse and so they overlap correctly

mui / mui-x

[charts] Fix area order when overlapping #13121