Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[charts] Fix area order when overlapping #13121

Merged
merged 2 commits into from
May 14, 2024

Conversation

alexfauquette
Copy link
Member

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

image

With guarantee some series are always smaller than others

image

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

@alexfauquette alexfauquette added bug 🐛 Something doesn't work component: charts This is the name of the generic UI component, not the React module! labels May 14, 2024
@mui-bot
Copy link

mui-bot commented May 14, 2024

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

Generated by 🚫 dangerJS against edec331

packages/x-charts/src/LineChart/AreaPlot.tsx Outdated Show resolved Hide resolved
Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
@alexfauquette alexfauquette enabled auto-merge (squash) May 14, 2024 15:17
@alexfauquette alexfauquette merged commit 0a2d34e into mui:master May 14, 2024
15 checks passed
arthurbalduini pushed a commit to arthurbalduini/mui-x that referenced this pull request May 23, 2024
Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
DungTiger pushed a commit to DungTiger/mui-x that referenced this pull request Jul 23, 2024
Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: charts This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[charts] Transparent fills in area line charts overlap causing color mixing issues
3 participants