Repository navigation
[charts] Support percentage values for radial axis minRadius/maxRadius - #22803
Merged
JCQuintas merged 6 commits intoJun 16, 2026
Merged
Conversation
The `minRadius` and `maxRadius` props of the radius axis now accept percentage strings (for example `'40%'`) in addition to numbers and pixel strings. Percentages are resolved against the available radius (half the smallest side of the drawing area), making radial charts responsive to container size. Values are resolved via the existing `getPercentageValue` helper, so behavior and error messages stay consistent with the Gauge component.
JCQuintas
added
scope: charts
Deploy previewBundle size
PerformanceTotal duration: 1,910.73 ms -275.43 ms(-12.6%) | Renders: 67 (+0)
24 tests within noise — details Check out the code infra dashboard for more information about this PR. |
| * The maximal radius. | ||
| * Can be a number (in pixels), a pixel string (for example `'80px'`), or a percentage string | ||
| * (for example `'80%'`) relative to the available radius (half the smallest side of the drawing area). | ||
| * @default The available radius (half the smallest side of the drawing area). |
Member
There was a problem hiding this comment.
Isn't that simpler?
Suggested change
| * @default The available radius (half the smallest side of the drawing area). | |
| * @default '100%' |
Comment on lines
+17
to
+20
| <Stack | ||
| direction="row" | ||
| sx={{ gap: 2, alignItems: 'center', justifyContent: 'center' }} | ||
| > |
Member
There was a problem hiding this comment.
Would need to add a breaking point to swhich to column layout
alexfauquette
approved these changes
Jun 16, 2026
alexfauquette
left a comment
alexfauquette
left a comment
Member
There was a problem hiding this comment.
Nice follow up 👍
Just left small docs improvement suggestion
JCQuintas
enabled auto-merge (squash)
June 16, 2026 09:25
JCQuintas
disabled auto-merge
June 16, 2026 09:53
mbrookes
pushed a commit
to mbrookes/mui-x
that referenced
this pull request
Jun 27, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The radius axis
minRadiusandmaxRadiusprops now accept percentage strings (for example'40%') in addition to numbers and pixel strings (50,'50px').Percentages resolve against the available radius — half the smallest side of the drawing area — so the radial extent scales with the chart. This makes radial charts responsive to their container size: a percentage hole keeps its proportion while a pixel hole stays a fixed size.
Implementation
minRadius/maxRadiustypes widened fromnumbertonumber | string.getPercentageValuehelper (the one the Gauge uses), keeping behavior and error messages consistent across the package.minRadius→0,maxRadius→ available radius.Docs
New Radius extent section under the radius axis, with a showcase demo comparing fixed pixel vs percentage radius across two chart sizes.