Skip to content

[charts-premium] Stabilize the radial charts #22655

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.

Sign up for GitHub

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

Merged
alexfauquette merged 17 commits into from
Jun 10, 2026
Merged

[charts-premium] Stabilize the radial charts #22655

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
bf658c4
update docs demo
alexfauquette Jun 2, 2026
0353f7a
update headers
alexfauquette Jun 2, 2026
e99ec68
update exports
alexfauquette Jun 2, 2026
8cf5761
update tests
alexfauquette Jun 2, 2026
3145279
pnpm prettier
alexfauquette Jun 2, 2026
f6892ed
pnpm docs:api
alexfauquette Jun 2, 2026
99bed45
pnpm docs:typescript:formatted
alexfauquette Jun 2, 2026
5d9fb13
update nav bar
alexfauquette Jun 2, 2026
9250551
fix forgotten radar deprecation
alexfauquette Jun 2, 2026
06767d6
remove deprecation from radius/rotation axes
alexfauquette Jun 2, 2026
caa0b3d
remove more unstable prefix
alexfauquette Jun 2, 2026
6e2d2c5
same for the radial data provider
alexfauquette Jun 2, 2026
22fbd8c
docs update
alexfauquette Jun 2, 2026
fec60bc
Merge remote-tracking branch 'upstream/master' into stabilise-radial-…
alexfauquette Jun 2, 2026
5b12e04
pnpm prettier
alexfauquette Jun 2, 2026
67e36da
pnpm docs:api
alexfauquette Jun 2, 2026
3fc9099
pnpm docs:typescript:formatted
alexfauquette Jun 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions docs/data/charts/export/PrintChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
import { Unstable_SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import { data } from './randomData';
import { heatmapData } from './heatmapData';

Expand Down Expand Up @@ -182,9 +182,7 @@ function Chart({ apiRef, type }) {
);

case 'sankey':
return (
<Unstable_SankeyChart apiRef={apiRef} height={300} series={sankeySeries} />
);
return <SankeyChart apiRef={apiRef} height={300} series={sankeySeries} />;

default:
throw new Error(`Unknown chart type: ${type}`);
Expand Down
4 changes: 2 additions & 2 deletions docs/data/charts/export/PrintChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { FunnelChart } from '@mui/x-charts-pro/FunnelChart';
import { useChartProApiRef } from '@mui/x-charts-pro/hooks';
import { RadarChartPro } from '@mui/x-charts-pro/RadarChartPro';
import { PieChartPro } from '@mui/x-charts-pro/PieChartPro';
import { Unstable_SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import { SankeyChart } from '@mui/x-charts-pro/SankeyChart';
import { data } from './randomData';
import { heatmapData } from './heatmapData';

Expand Down Expand Up @@ -198,7 +198,7 @@ function Chart<T extends ChartType = ChartType>({
);
case 'sankey':
return (
<Unstable_SankeyChart
<SankeyChart
apiRef={apiRef as React.RefObject<ChartProApi<'sankey'> | undefined>}
height={300}
series={sankeySeries}
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/radar/CompositionExample.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Stack from '@mui/material/Stack';
import {
Unstable_RadarDataProvider as RadarDataProvider,
RadarDataProvider,
RadarGrid,
RadarSeriesMarks,
RadarSeriesArea,
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/radar/CompositionExample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Stack from '@mui/material/Stack';
import {
Unstable_RadarDataProvider as RadarDataProvider,
RadarDataProvider,
RadarGrid,
RadarSeriesMarks,
RadarSeriesArea,
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/radial-axes/BandHighlight.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import Stack from '@mui/material/Stack';
import { Unstable_RadialLineChart as RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
import { dataset, valueFormatter } from '../dataset/weather';

export default function BandHighlight() {
Expand Down
2 changes: 1 addition & 1 deletion docs/data/charts/radial-axes/BandHighlight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import Stack from '@mui/material/Stack';
import { Unstable_RadialLineChart as RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
import { RadialLineChart } from '@mui/x-charts-premium/RadialLineChart';
import { dataset, valueFormatter } from '../dataset/weather';

export default function BandHighlight() {
Expand Down
19 changes: 8 additions & 11 deletions docs/data/charts/radial-axes/RadialGridPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';

export default function RadialGridPlayground() {
return (
Expand Down Expand Up @@ -33,7 +33,7 @@ export default function RadialGridPlayground() {
}}
renderDemo={(props) => (
<Box sx={{ width: '100%', maxWidth: 400 }}>
<Unstable_ChartsRadialDataProvider
<ChartsRadialDataProvider
height={300}
rotationAxis={[
{
Expand All @@ -56,16 +56,13 @@ export default function RadialGridPlayground() {
>
<ChartsLayerContainer>
<ChartsSvgLayer>
<Unstable_ChartsRadialGrid
rotation={props.rotation}
radius={props.radius}
/>
<ChartsRadialGrid rotation={props.rotation} radius={props.radius} />
</ChartsSvgLayer>
</ChartsLayerContainer>
</Unstable_ChartsRadialDataProvider>
</ChartsRadialDataProvider>
</Box>
)}
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
getCode={({ props }) => `<ChartsRadialDataProvider
rotationAxis={[{
startAngle: ${props.startAngle},
endAngle: ${props.endAngle},
Expand All @@ -77,8 +74,8 @@ export default function RadialGridPlayground() {
tickNumber: ${props.radiusTickNumber},
}]}
>
<Unstable_ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
</Unstable_ChartsRadialDataProvider>`}
<ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
</ChartsRadialDataProvider>`}
/>
);
}
19 changes: 8 additions & 11 deletions docs/data/charts/radial-axes/RadialGridPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';

export default function RadialGridPlayground() {
return (
Expand Down Expand Up @@ -35,7 +35,7 @@ export default function RadialGridPlayground() {
}
renderDemo={(props) => (
<Box sx={{ width: '100%', maxWidth: 400 }}>
<Unstable_ChartsRadialDataProvider
<ChartsRadialDataProvider
height={300}
rotationAxis={[
{
Expand All @@ -58,16 +58,13 @@ export default function RadialGridPlayground() {
>
<ChartsLayerContainer>
<ChartsSvgLayer>
<Unstable_ChartsRadialGrid
rotation={props.rotation}
radius={props.radius}
/>
<ChartsRadialGrid rotation={props.rotation} radius={props.radius} />
</ChartsSvgLayer>
</ChartsLayerContainer>
</Unstable_ChartsRadialDataProvider>
</ChartsRadialDataProvider>
</Box>
)}
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
getCode={({ props }) => `<ChartsRadialDataProvider
rotationAxis={[{
startAngle: ${props.startAngle},
endAngle: ${props.endAngle},
Expand All @@ -79,8 +76,8 @@ export default function RadialGridPlayground() {
tickNumber: ${props.radiusTickNumber},
}]}
>
<Unstable_ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
</Unstable_ChartsRadialDataProvider>`}
<ChartsRadialGrid ${[props.rotation && 'rotation', props.radius && 'radius'].filter(Boolean).join(' ')} />
</ChartsRadialDataProvider>`}
/>
);
}
18 changes: 9 additions & 9 deletions docs/data/charts/radial-axes/RadiusAxisPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { Unstable_ChartsRadiusAxis as ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';

export default function RadiusAxisPlayground() {
return (
Expand Down Expand Up @@ -55,7 +55,7 @@ export default function RadiusAxisPlayground() {
width: '100%',
}}
>
<Unstable_ChartsRadialDataProvider
<ChartsRadialDataProvider
height={400}
rotationAxis={[
{
Expand All @@ -77,7 +77,7 @@ export default function RadiusAxisPlayground() {
>
<ChartsLayerContainer>
<ChartsSvgLayer>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRadiusAxis
position={props.position}
disableLine={props.disableLine}
Expand All @@ -88,10 +88,10 @@ export default function RadiusAxisPlayground() {
/>
</ChartsSvgLayer>
</ChartsLayerContainer>
</Unstable_ChartsRadialDataProvider>
</ChartsRadialDataProvider>
</Box>
)}
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
getCode={({ props }) => `<ChartsRadialDataProvider
rotationAxis={[{
startAngle: ${props.startAngle},
endAngle: ${props.endAngle},
Expand All @@ -113,9 +113,9 @@ ${[
.join('\n')}
}]}
>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRadiusAxis />
</Unstable_ChartsRadialDataProvider>`}
</ChartsRadialDataProvider>`}
/>
);
}
18 changes: 9 additions & 9 deletions docs/data/charts/radial-axes/RadiusAxisPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { Unstable_ChartsRadiusAxis as ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { ChartsRadiusAxis } from '@mui/x-charts/ChartsRadiusAxis';
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';

export default function RadiusAxisPlayground() {
return (
Expand Down Expand Up @@ -57,7 +57,7 @@ export default function RadiusAxisPlayground() {
width: '100%',
}}
>
<Unstable_ChartsRadialDataProvider
<ChartsRadialDataProvider
height={400}
rotationAxis={[
{
Expand All @@ -79,7 +79,7 @@ export default function RadiusAxisPlayground() {
>
<ChartsLayerContainer>
<ChartsSvgLayer>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRadiusAxis
position={props.position}
disableLine={props.disableLine}
Expand All @@ -90,10 +90,10 @@ export default function RadiusAxisPlayground() {
/>
</ChartsSvgLayer>
</ChartsLayerContainer>
</Unstable_ChartsRadialDataProvider>
</ChartsRadialDataProvider>
</Box>
)}
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
getCode={({ props }) => `<ChartsRadialDataProvider
rotationAxis={[{
startAngle: ${props.startAngle},
endAngle: ${props.endAngle},
Expand All @@ -115,9 +115,9 @@ ${[
.join('\n')}
}]}
>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRadiusAxis />
</Unstable_ChartsRadialDataProvider>`}
</ChartsRadialDataProvider>`}
/>
);
}
18 changes: 9 additions & 9 deletions docs/data/charts/radial-axes/RotationAxisPlayground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { Unstable_ChartsRotationAxis as ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis';
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis';
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';

export default function RotationAxisPlayground() {
return (
Expand Down Expand Up @@ -54,7 +54,7 @@ export default function RotationAxisPlayground() {
height: 300,
}}
>
<Unstable_ChartsRadialDataProvider
<ChartsRadialDataProvider
height={400}
rotationAxis={[
{
Expand All @@ -76,7 +76,7 @@ export default function RotationAxisPlayground() {
>
<ChartsLayerContainer>
<ChartsSvgLayer>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRotationAxis
disableLine={props.disableLine}
disableTicks={props.disableTicks}
Expand All @@ -87,10 +87,10 @@ export default function RotationAxisPlayground() {
/>
</ChartsSvgLayer>
</ChartsLayerContainer>
</Unstable_ChartsRadialDataProvider>
</ChartsRadialDataProvider>
</Box>
)}
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
getCode={({ props }) => `<ChartsRadialDataProvider
rotationAxis={[{
startAngle: ${props.startAngle},
endAngle: ${props.endAngle},
Expand All @@ -112,9 +112,9 @@ ${[
maxRadius: ${props.maxRadius},
}]}
>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRotationAxis />
</Unstable_ChartsRadialDataProvider>`}
</ChartsRadialDataProvider>`}
/>
);
}
18 changes: 9 additions & 9 deletions docs/data/charts/radial-axes/RotationAxisPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ import Box from '@mui/material/Box';
import ChartsUsageDemo from 'docs/src/modules/components/ChartsUsageDemo';
import { ChartsLayerContainer } from '@mui/x-charts/ChartsLayerContainer';
import { ChartsSvgLayer } from '@mui/x-charts/ChartsSvgLayer';
import { Unstable_ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { Unstable_ChartsRotationAxis as ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis';
import { Unstable_ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';
import { ChartsRadialGrid } from '@mui/x-charts/ChartsRadialGrid';
import { ChartsRotationAxis } from '@mui/x-charts/ChartsRotationAxis';
import { ChartsRadialDataProvider } from '@mui/x-charts/ChartsRadialDataProvider';

export default function RotationAxisPlayground() {
return (
Expand Down Expand Up @@ -56,7 +56,7 @@ export default function RotationAxisPlayground() {
height: 300,
}}
>
<Unstable_ChartsRadialDataProvider
<ChartsRadialDataProvider
height={400}
rotationAxis={[
{
Expand All @@ -78,7 +78,7 @@ export default function RotationAxisPlayground() {
>
<ChartsLayerContainer>
<ChartsSvgLayer>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRotationAxis
disableLine={props.disableLine}
disableTicks={props.disableTicks}
Expand All @@ -89,10 +89,10 @@ export default function RotationAxisPlayground() {
/>
</ChartsSvgLayer>
</ChartsLayerContainer>
</Unstable_ChartsRadialDataProvider>
</ChartsRadialDataProvider>
</Box>
)}
getCode={({ props }) => `<Unstable_ChartsRadialDataProvider
getCode={({ props }) => `<ChartsRadialDataProvider
rotationAxis={[{
startAngle: ${props.startAngle},
endAngle: ${props.endAngle},
Expand All @@ -114,9 +114,9 @@ ${[
maxRadius: ${props.maxRadius},
}]}
>
<Unstable_ChartsRadialGrid rotation radius />
<ChartsRadialGrid rotation radius />
<ChartsRotationAxis />
</Unstable_ChartsRadialDataProvider>`}
</ChartsRadialDataProvider>`}
/>
);
}
Loading
Loading