[charts] Enable keyboard navigation in radar chart by alexfauquette · Pull Request #20765 · mui/mui-x

alexfauquette · 2025-12-24T09:54:56Z

Activate the keyboard navigation on radar.

I also updated the tooltip such that it's able to display only one vale at a time and position itself correctly

To test it, you can add enableKeyboardNavigation in the second chart of tooltip demo https://deploy-preview-20765--material-ui-x.netlify.app/x/react-charts/radar/#tooltip

mui-bot · 2025-12-24T09:56:40Z

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

Updated pages:

docs/data/charts/radar/radar.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+892B^(+0.25%)	🔺+294B^(+0.27%)
@mui/x-charts-pro	🔺+892B^(+0.19%)	🔺+255B^(+0.18%)
@mui/x-charts-premium	🔺+892B^(+0.19%)	🔺+249B^(+0.18%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against e100c6a

codspeed-hq · 2025-12-24T10:16:15Z

Merging this PR will degrade performance by 8.16%

❌ 1 regressed benchmark
✅ 13 untouched benchmarks

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Mode	Benchmark	`BASE`	`HEAD`	Efficiency
❌	Simulation	`ScatterChartPro with big data amount (single renderer)`	409 ms	445.3 ms	-8.16%

_{Comparing alexfauquette:radar-keyboard (e100c6a) with master (a926990)¹}

No successful run was found on master (8b6e5ac) during the generation of this report, so a926990 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

bernardobelchior

If I press arrow up on a single series radar chart, should it remove the focus or just keep the focus where it is? It's doing the former, but wouldn't it make sense to be the latter?

packages/x-charts/src/RadarChart/FocusedRadarMark.tsx

alexfauquette · 2025-12-29T09:22:33Z

If I press arrow up on a single series radar chart, should it remove the focus or just keep the focus where it is? It's doing the former, but wouldn't it make sense to be the latter?

Yes that's a bug in the initial implementation of next/prev series. The same "bug" is already visible on pie chart. It's just that most of our line/bar demo have multiple series so I did not spot it

It will be fixed by #20757 I added test to be sure 👍

github-actions · 2025-12-30T11:34:01Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2026-01-07T11:31:48Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior · 2026-01-14T09:35:26Z

I was expecting the next data point (arrow right) would loop in the radar, but it isn't. Is that intended?

Screen.Recording.2026-01-14.at.10.34.09.mov

bernardobelchior · 2026-01-14T09:37:20Z

Should the mark outline be different when the mark is disabled?

Screen.Recording.2026-01-14.at.10.36.01.mov

bernardobelchior · 2026-01-14T09:37:45Z

docs/data/charts/radar/radar.md

 title: React Radar chart
 productId: x-charts
-components: RadarChart, RadarChartPro, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSeriesPlot, RadarMetricLabels, RadarAxisHighlight, RadarAxis, ChartsWrapper
+components: RadarChart, RadarChartPro, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSeriesPlot, RadarMetricLabels, RadarAxisHighlight, RadarAxis, ChartsWrapper, FocusedRadarMark


Don't we need to mention that we should render this component in the composition section?

I will update the docs all at once when all charts are done 👍

alexfauquette · 2026-01-14T09:49:49Z

Should the mark outline be different when the mark is disabled?

We have a similar issue with the line chart. I assume we could render a mark. But not sure. To me this is a good enought solution compared to most of the competitors

github-actions · 2026-01-14T12:58:51Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

bernardobelchior

Nice job 💯

alexfauquette added 3 commits December 24, 2025 10:47

[charts] Enable keyboard navigation in radar chart

1847925

Improve the tooltip for the keyboard navigation

75c8c09

scripts

18d6fe5

alexfauquette added the type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. label Dec 24, 2025

alexfauquette requested a review from prakhargupta1 as a code owner December 24, 2025 09:54

alexfauquette added the scope: charts Changes related to the charts. label Dec 24, 2025

alexfauquette requested a review from a team as a code owner December 24, 2025 09:54

bernardobelchior reviewed Dec 24, 2025

View reviewed changes

packages/x-charts/src/RadarChart/FocusedRadarMark.tsx Outdated Show resolved Hide resolved

alexfauquette requested a review from JCQuintas December 29, 2025 09:24

remove useless questions mark

f3d845c

alexfauquette force-pushed the radar-keyboard branch from acceb5d to f3d845c Compare December 29, 2025 09:25

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Dec 30, 2025

Merge remote-tracking branch 'upstream/master' into radar-keyboard

7c00804

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged. and removed PR: out-of-date The pull request has merge conflicts and can't be merged. labels Jan 6, 2026

Merge remote-tracking branch 'upstream/master' into radar-keyboard

554dbab

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 13, 2026

lint

b7a1272

bernardobelchior reviewed Jan 14, 2026

View reviewed changes

Allow circular navigation in radar chart

149b6a7

alexfauquette requested a review from bernardobelchior January 14, 2026 10:32

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 14, 2026

Merge remote-tracking branch 'upstream/master' into radar-keyboard

e100c6a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jan 14, 2026

bernardobelchior approved these changes Jan 14, 2026

View reviewed changes

alexfauquette merged commit 9bf9320 into mui:master Jan 14, 2026
21 of 22 checks passed

Uh oh!

Conversation

alexfauquette commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Dec 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 8.16%

Performance Changes

Footnotes

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

alexfauquette commented Dec 29, 2025

Uh oh!

github-actions bot commented Dec 30, 2025

Uh oh!

github-actions bot commented Jan 7, 2026

Uh oh!

bernardobelchior commented Jan 14, 2026

Uh oh!

bernardobelchior commented Jan 14, 2026

Uh oh!

bernardobelchior Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

alexfauquette commented Jan 14, 2026

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

bernardobelchior left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

alexfauquette commented Dec 24, 2025 •

edited

Loading

mui-bot commented Dec 24, 2025 •

edited

Loading

codspeed-hq bot commented Dec 24, 2025 •

edited

Loading