[charts] Explore polar charts

docs/data/charts/dataset/monthlyGlobalTemperatures.js

@@ -0,0 +1,47 @@
+// Data from: https://ourworldindata.org/grapher/monthly-average-surface-temperaturess-by-year?overlay=download-data
+const monthlyGlobalTemperatures = [
+  {
+    year: 2025,
+    temperatures: [
+      13.22883, 13.356764, 14.059157, 14.962844, 15.792284, 16.456886, 16.67788,
+      16.601345, 16.108519, 15.1414995, 14.0192585, 13.151818,
+    ],
+  },
+  {
+    year: 2015,
+    temperatures: [
+      12.634522, 12.928324, 13.637803, 14.418158, 15.4382105, 16.169155, 16.382626,
+      16.353651, 15.713228, 14.8876295, 13.75632, 13.204671,
+    ],
+  },
+  {
+    year: 2005,
+    temperatures: [
+      12.589498, 12.735534, 13.497629, 14.432102, 15.331207, 16.059366, 16.314322,
+      16.141184, 15.57603, 14.618258, 13.501898, 12.766566,
+    ],
+  },
+  {
+    year: 1995,
+    temperatures: [
+      12.312858, 12.794863, 13.173332, 14.242319, 15.026494, 15.8967905, 16.125097,
+      16.0047, 15.245733, 14.251504, 13.146228, 12.325032,
+    ],
+  },
+  {
+    year: 1985,
+    temperatures: [
+      12.01948, 12.034697, 12.878375, 13.889007, 14.824746, 15.516486, 15.69393,
+      15.717554, 14.925496, 13.799661, 12.776523, 12.119616,
+    ],
+  },
+  {
+    year: 1975,
+    temperatures: [
+      11.799964, 12.069822, 12.798457, 13.720477, 14.631341, 15.288152, 15.500376,
+      15.273629, 14.606582, 13.518547, 12.49495, 11.842349,
+    ],
+  },
+];
+
+export default monthlyGlobalTemperatures;

docs/data/charts/dataset/monthlyGlobalTemperatures.ts

@@ -0,0 +1,47 @@
+// Data from: https://ourworldindata.org/grapher/monthly-average-surface-temperaturess-by-year?overlay=download-data
+const monthlyGlobalTemperatures: { year: number; temperatures: number[] }[] = [
+  {
+    year: 2025,
+    temperatures: [
+      13.22883, 13.356764, 14.059157, 14.962844, 15.792284, 16.456886, 16.67788, 16.601345,
+      16.108519, 15.1414995, 14.0192585, 13.151818,
+    ],
+  },
+  {
+    year: 2015,
+    temperatures: [
+      12.634522, 12.928324, 13.637803, 14.418158, 15.4382105, 16.169155, 16.382626, 16.353651,
+      15.713228, 14.8876295, 13.75632, 13.204671,
+    ],
+  },
+  {
+    year: 2005,
+    temperatures: [
+      12.589498, 12.735534, 13.497629, 14.432102, 15.331207, 16.059366, 16.314322, 16.141184,
+      15.57603, 14.618258, 13.501898, 12.766566,
+    ],
+  },
+  {
+    year: 1995,
+    temperatures: [
+      12.312858, 12.794863, 13.173332, 14.242319, 15.026494, 15.8967905, 16.125097, 16.0047,
+      15.245733, 14.251504, 13.146228, 12.325032,
+    ],
+  },
+  {
+    year: 1985,
+    temperatures: [
+      12.01948, 12.034697, 12.878375, 13.889007, 14.824746, 15.516486, 15.69393, 15.717554,
+      14.925496, 13.799661, 12.776523, 12.119616,
+    ],
+  },
+  {
+    year: 1975,
+    temperatures: [
+      11.799964, 12.069822, 12.798457, 13.720477, 14.631341, 15.288152, 15.500376, 15.273629,
+      14.606582, 13.518547, 12.49495, 11.842349,
+    ],
+  },
+];
+
+export default monthlyGlobalTemperatures;

docs/data/charts/radial-lines/RadialLineOverview.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { blue } from '@mui/material/colors';
+import { RadialLineChart } from '@mui/x-charts/RadialLineChart';
+import monthlyGlobalTemperatures from '../dataset/monthlyGlobalTemperatures';
+
+const months = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+const colors = [blue[100], blue[300], blue[500], blue[700], blue[800], blue[900]];
+const series = monthlyGlobalTemperatures.reverse().map((item, index) => ({
+  label: item.year.toString(),
+  data: item.temperatures,
+  color: colors[index],
+}));
+
+export default function RadialLineOverview() {
+  return (
+    <RadialLineChart
+      height={300}
+      series={series}
+      rotationAxis={[{ data: months, scaleType: 'point' }]}
+      radiusAxis={[
+        {
+          domainLimit: (min, max) => ({
+            min: Math.floor(min.valueOf()),
+            max: Math.ceil(max.valueOf()),
+          }),
+        },
+      ]}
+    />
+  );
+}

docs/data/charts/radial-lines/RadialLineOverview.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { blue } from '@mui/material/colors';
+import { RadialLineChart } from '@mui/x-charts/RadialLineChart';
+import monthlyGlobalTemperatures from '../dataset/monthlyGlobalTemperatures';
+
+const months = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec',
+];
+
+const colors = [blue[100], blue[300], blue[500], blue[700], blue[800], blue[900]];
+const series = monthlyGlobalTemperatures.reverse().map((item, index) => ({
+  label: item.year.toString(),
+  data: item.temperatures,
+  color: colors[index],
+}));
+
+export default function RadialLineOverview() {
+  return (
+    <RadialLineChart
+      height={300}
+      series={series}
+      rotationAxis={[{ data: months, scaleType: 'point' }]}
+      radiusAxis={[
+        {
+          domainLimit: (min, max) => ({
+            min: Math.floor(min.valueOf()),
+            max: Math.ceil(max.valueOf()),
+          }),
+        },
+      ]}
+    />
+  );
+}

docs/data/charts/radial-lines/RadialLineOverview.tsx.preview

@@ -0,0 +1,13 @@
+<RadialLineChart
+  height={300}
+  series={series}
+  rotationAxis={[{ data: months, scaleType: 'point' }]}
+  radiusAxis={[
+    {
+      domainLimit: (min, max) => ({
+        min: Math.floor(min.valueOf()),
+        max: Math.ceil(max.valueOf()),
+      }),
+    },
+  ]}
+/>

docs/data/charts/radial-lines/radial-lines.md

@@ -0,0 +1,59 @@
+---
+title: React Radial Line chart
+productId: x-charts
+components: RadialLineChart, RadialLinePlot, ChartsPolarGrid, ChartsPolarDataProvider
+---
+
+# Charts - Radial Lines
+
+<p class="description">Use radial line charts to show trends along periodic values.</p>
+
+## Overview
+
+Radial line charts plot line series on polar coordinates instead of a Cartesian grid.
+
+Each data point maps to an angle on the rotation axis and a distance on the radius axis, creating a shape that wraps around the center.
+
+They work well when you want to compare cyclical patterns or display multivariate data on a shared circular layout.
+
+{{"demo": "RadialLineOverview.js"}}
+
+## Basics
+
+### Data format
+
+Radial line chart series use the same `data` property as regular line charts: an array of numbers representing the values along the radius axis.
+
+To set the categories around the circle, pass `data` on the `rotationAxis` configuration with `scaleType: 'point'`.
+Its `data` should have the same length as the series.
+
+When you omit the `rotationAxis` prop entirely, `RadialLineChart` supplies a default rotation axis with `scaleType='point'`.
+Its `data` is `[0, 1, 2, ...]` with length matching the longest series, so each value pairs with its index in the series `data` array.
+
+<!-- {{"demo": "BasicRadialLine.js"}} -->
+
+## Composition
+
+Use `ChartsPolarDataProvider` to provide `series`, `rotationAxis`, and `radiusAxis` props for composition.
+
+In addition to the shared chart components available for [composition](/x/react-charts/composition/), you can use `RadialLinePlot` to draw the lines and `ChartsPolarGrid` to draw the grid.
+
+Here's how the radial line chart is composed:
+
+```jsx
+<ChartsPolarDataProvider>
+  <ChartsWrapper>
+    <ChartsLegend />
+    <ChartsSurface>
+      <ChartsPolarGrid />
+      <g clipPath={`url(#${clipPathId})`}>
+        {/* Elements clipped inside the drawing area. */}
+        <RadialLinePlot />
+        <ChartsOverlay />
+      </g>
+      <ChartsClipPath id={clipPathId} />
+    </ChartsSurface>
+    <ChartsTooltip />
+  </ChartsWrapper>
+</ChartsPolarDataProvider>
+```

docs/data/chartsApiPages.ts

@@ -117,6 +117,14 @@ const chartsApiPages: MuiPage[] = [
     pathname: '/x/api/charts/charts-localization-provider',
     title: 'ChartsLocalizationProvider',
   },
+  {
+    pathname: '/x/api/charts/charts-polar-data-provider',
+    title: 'ChartsPolarDataProvider',
+  },
+  {
+    pathname: '/x/api/charts/charts-polar-grid',
+    title: 'ChartsPolarGrid',
+  },
   {
     pathname: '/x/api/charts/charts-reference-line',
     title: 'ChartsReferenceLine',
@@ -363,6 +371,14 @@ const chartsApiPages: MuiPage[] = [
     pathname: '/x/api/charts/radar-series-plot',
     title: 'RadarSeriesPlot',
   },
+  {
+    pathname: '/x/api/charts/radial-line-chart',
+    title: 'RadialLineChart',
+  },
+  {
+    pathname: '/x/api/charts/radial-line-plot',
+    title: 'RadialLinePlot',
+  },
   {
     pathname: '/x/api/charts/range-bar-plot',
     title: 'RangeBarPlot',

docs/pages/x/api/charts/charts-polar-data-provider.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './charts-polar-data-provider.json';
+
+export default function Page(props) {
+  const { descriptions } = props;
+  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
+}
+
+export async function getStaticProps() {
+  const req = require.context(
+    'docsx/translations/api-docs/charts/charts-polar-data-provider',
+    false,
+    /\.\/charts-polar-data-provider.*\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return { props: { descriptions } };
+}

docs/pages/x/api/charts/charts-polar-data-provider.json

@@ -0,0 +1,39 @@
+{
+  "props": {
+    "colors": {
+      "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;func" },
+      "default": "rainbowSurgePalette"
+    },
+    "height": { "type": { "name": "number" } },
+    "id": { "type": { "name": "string" } },
+    "localeText": { "type": { "name": "object" } },
+    "margin": {
+      "type": {
+        "name": "union",
+        "description": "number<br>&#124;&nbsp;{ bottom?: number, left?: number, right?: number, top?: number }"
+      }
+    },
+    "series": { "type": { "name": "arrayOf", "description": "Array&lt;object&gt;" } },
+    "skipAnimation": { "type": { "name": "bool" } },
+    "slotProps": { "type": { "name": "object" } },
+    "slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } },
+    "width": { "type": { "name": "number" } }
+  },
+  "name": "ChartsPolarDataProvider",
+  "imports": [
+    "import { ChartsPolarDataProvider } from '@mui/x-charts/ChartsPolarDataProvider';",
+    "import { ChartsPolarDataProvider } from '@mui/x-charts';",
+    "import { ChartsPolarDataProvider } from '@mui/x-charts-pro';",
+    "import { ChartsPolarDataProvider } from '@mui/x-charts-premium';"
+  ],
+  "slots": [
+    { "name": "baseButton", "description": "", "class": null },
+    { "name": "baseIconButton", "description": "", "class": null }
+  ],
+  "classes": [],
+  "muiName": "MuiChartsPolarDataProvider",
+  "filename": "/packages/x-charts/src/ChartsPolarDataProvider/ChartsPolarDataProvider.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/radial-lines/\">Charts - Radial Lines</a></li></ul>",
+  "cssComponent": false
+}

docs/pages/x/api/charts/charts-polar-grid.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import ApiPage from 'docs/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './charts-polar-grid.json';
+
+export default function Page(props) {
+  const { descriptions } = props;
+  return <ApiPage descriptions={descriptions} pageContent={jsonPageContent} />;
+}
+
+export async function getStaticProps() {
+  const req = require.context(
+    'docsx/translations/api-docs/charts/charts-polar-grid',
+    false,
+    /\.\/charts-polar-grid.*\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return { props: { descriptions } };
+}