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] Allow percentage values for pie chart center and radius #11464

Merged
merged 5 commits into from
Dec 21, 2023

Conversation

alexfauquette
Copy link
Member

@alexfauquette alexfauquette commented Dec 19, 2023

Fix #11309

The inner radius value for 100% is the maximal radius.

My initial idea was to take:

  • outer radius at 100% = the maximal radius that fits in the drawing area
  • inner radius at 100% = the outer radius

This would ensure that the inner radius is always smaller than the outer radius.

But if you want to put multiple pie charts inside each other, you will need to do some computation to get the outer radius of one pie to match the inner radius of the other one.

The percentage is supported only at the PiePlot level. To place sub-components you already need to manipulate the drawing area, so the diff between having to compute width/2 vs providing '50%' is small enough to remove percent support

@alexfauquette alexfauquette added the component: charts This is the name of the generic UI component, not the React module! label Dec 19, 2023
@mui-bot
Copy link

mui-bot commented Dec 19, 2023

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

Generated by 🚫 dangerJS against d8e0e06

Copy link
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The improvement looks great! 👍 💯

packages/x-charts/src/PieChart/PieArcLabelPlot.tsx Outdated Show resolved Hide resolved
packages/x-charts/src/internals/utils.ts Outdated Show resolved Hide resolved
packages/x-charts/src/internals/utils.ts Outdated Show resolved Hide resolved
packages/x-charts/src/internals/utils.ts Outdated Show resolved Hide resolved
@alexfauquette alexfauquette merged commit 4106101 into mui:next Dec 21, 2023
17 checks passed
alexfauquette added a commit to alexfauquette/mui-x that referenced this pull request Dec 22, 2023
@johnsonav1992
Copy link

@alexfauquette Appreciate you, sir! Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: charts This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Charts] Pie Charts - Allow Percentages for innerRadius / outerRadius
4 participants