search

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!
https://mui.com/x/
4.05k stars 1.25k forks source link

[charts] PieChart disappears with certain data values #14167

Open samwato opened 1 month ago

samwato commented 1 month ago

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/epic-bush-4jk7jf

This issue may have been raised before, however, the example shows a pie chart hidden and 2 pie charts that are visible.

Screenshot from 2024-08-12 10-10-51

Current behavior

The pie chart is hidden

Expected behavior

The pie chart is visible

Context

My use case is the data values are dynamic and have ran into this issue by accident

Your environment

No response

Search keywords: piechart

alexfauquette commented 1 month ago

It's the first time we see this issue.

Seems to come from the computation of the arc, because the path value started with M0,-77.5A for the invisible arc. But starts with M0.001,-77.5A for others.

I still need to investigate if this rounding issue come from the animation interpolation not finishing on the correct value, or if it's the d3.arc() that has an issue with this extreme edge case

alexfauquette commented 1 month ago

It's not the animation, but D3JS that causes the disappearing arc. For an unknown reason modifying the radius impacts this.

https://codesandbox.io/p/sandbox/gracious-keller-8glvp3?file=%2Fsrc%2FDemo.tsx&workspaceId=d214a4af-c616-40eb-ac12-807102cf00db

Not sure if the solution is on D3 side, or if it's better to have a custom behavior that either ignore too small values or over represent them with that they stay visible for humans