[charts] Add RadarAxis component to render labels

docs/data/charts/radar/DemoRadarAxis.js

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';
+
+function getTextAnchor(textAnchor) {
+  switch (textAnchor) {
+    case 'default':
+      return undefined;
+    case 'function':
+      return (angle) => (angle < 180 ? 'start' : 'end');
+    default:
+      return textAnchor;
+  }
+}
+
+function getTextAnchorCode(textAnchor) {
+  switch (textAnchor) {
+    case 'default':
+      return '';
+    case 'function':
+      return `textAnchor={(angle) => angle < 180 ? 'start' : 'end'}`;
+    default:
+      return `textAnchor="${textAnchor}"`;
+  }
+}
+
+export default function DemoRadarAxis() {
+  return (
+    <ChartsUsageDemo
+      componentName="RadarChart"
+      data={{
+        angle: {
+          knob: 'number',
+          defaultValue: 30,
+          min: -360,
+          max: 360,
+          step: 10,
+        },
+        divisions: {
+          knob: 'number',
+          defaultValue: 4,
+          min: 1,
+          max: 5,
+        },
+        labelOrientation: {
+          knob: 'radio',
+          options: ['horizontal', 'rotated'],
+          defaultValue: 'horizontal',
+        },
+        textAnchor: {
+          knob: 'select',
+          options: ['default', 'start', 'end', 'function'],
+          defaultValue: 'default',
+        },
+      }}
+      renderDemo={(props) => (
+        <Box sx={{ width: '100%', maxWidth: 400 }}>
+          <RadarChart
+            height={250}
+            margin={{ top: 20 }}
+            series={[{ data: [100, 98, 86, 99, 85, 55] }]}
+            divisions={4}
+            radar={{
+              max: 100,
+              metrics: [
+                'Math',
+                'Chinese',
+                'English',
+                'Geography',
+                'Physics',
+                'History',
+              ],
+            }}
+          >
+            <RadarAxis
+              metric="Math"
+              labelOrientation={props.labelOrientation}
+              angle={props.angle}
+              textAnchor={getTextAnchor(props.textAnchor)}
+              divisions={props.divisions}
+            />
+          </RadarChart>
+        </Box>
+      )}
+      getCode={({ props }) => {
+        const textAnchorCode = getTextAnchorCode(props.textAnchor);
+        return [
+          `import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';`,
+          '',
+          '<RadarChart>',
+          `  <RadarAxis`,
+          `    metric="Math"`,
+          `    divisions={${props.divisions}}`,
+          `    labelOrientation="${props.labelOrientation}"`,
+          `    angle="${props.angle}"`,
+          ...(textAnchorCode ? [`    ${textAnchorCode}`] : []),
+          '  />',
+          '</RadarChart>',
+        ].join('\n');
+      }}
+    />
+  );
+}

docs/data/charts/radar/DemoRadarAxis.tsx

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';
+
+function getTextAnchor(textAnchor: 'default' | 'start' | 'end' | 'function') {
+  switch (textAnchor) {
+    case 'default':
+      return undefined;
+    case 'function':
+      return (angle: number) => (angle < 180 ? 'start' : 'end');
+    default:
+      return textAnchor;
+  }
+}
+
+function getTextAnchorCode(textAnchor: 'default' | 'start' | 'end' | 'function') {
+  switch (textAnchor) {
+    case 'default':
+      return '';
+    case 'function':
+      return `textAnchor={(angle) => angle < 180 ? 'start' : 'end'}`;
+    default:
+      return `textAnchor="${textAnchor}"`;
+  }
+}
+
+export default function DemoRadarAxis() {
+  return (
+    <ChartsUsageDemo
+      componentName="RadarChart"
+      data={{
+        angle: {
+          knob: 'number',
+          defaultValue: 30,
+          min: -360,
+          max: 360,
+          step: 10,
+        },
+        divisions: {
+          knob: 'number',
+          defaultValue: 4,
+          min: 1,
+          max: 5,
+        },
+        labelOrientation: {
+          knob: 'radio',
+          options: ['horizontal', 'rotated'] as const,
+          defaultValue: 'horizontal',
+        },
+        textAnchor: {
+          knob: 'select',
+          options: ['default', 'start', 'end', 'function'] as const,
+          defaultValue: 'default',
+        },
+      }}
+      renderDemo={(props) => (
+        <Box sx={{ width: '100%', maxWidth: 400 }}>
+          <RadarChart
+            height={250}
+            margin={{ top: 20 }}
+            series={[{ data: [100, 98, 86, 99, 85, 55] }]}
+            divisions={4}
+            radar={{
+              max: 100,
+              metrics: [
+                'Math',
+                'Chinese',
+                'English',
+                'Geography',
+                'Physics',
+                'History',
+              ],
+            }}
+          >
+            <RadarAxis
+              metric="Math"
+              labelOrientation={props.labelOrientation}
+              angle={props.angle}
+              textAnchor={getTextAnchor(props.textAnchor)}
+              divisions={props.divisions}
+            />
+          </RadarChart>
+        </Box>
+      )}
+      getCode={({ props }) => {
+        const textAnchorCode = getTextAnchorCode(props.textAnchor);
+        return [
+          `import { RadarChart, RadarAxis } from '@mui/x-charts/RadarChart';`,
+          '',
+          '<RadarChart>',
+          `  <RadarAxis`,
+          `    metric="Math"`,
+          `    divisions={${props.divisions}}`,
+          `    labelOrientation="${props.labelOrientation}"`,
+          `    angle="${props.angle}"`,
+          ...(textAnchorCode ? [`    ${textAnchorCode}`] : []),
+          '  />',
+          '</RadarChart>',
+        ].join('\n');
+      }}
+    />
+  );
+}

docs/data/charts/radar/radar.md

@@ -1,7 +1,7 @@
 ---
 title: React Radar chart
 productId: x-charts
-components: RadarChart, RadarChartPro, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSeriesPlot, RadarMetricLabels, RadarAxisHighlight, ChartsWrapper
+components: RadarChart, RadarChartPro, RadarGrid, RadarSeriesArea, RadarSeriesMarks, RadarSeriesPlot, RadarMetricLabels, RadarAxisHighlight, RadarAxis, ChartsWrapper
 ---
 
 # Charts - Radar
@@ -53,6 +53,18 @@ The radar chart displays a grid behind the series that can be configured with:
 
 {{"demo": "DemoRadar.js" }}
 
+## Axis values
+
+You can add labels to metrics with the `<RadarAxis />`.
+This component requires a `metric` prop and can be configured with:
+
+- `angle` The angle used to display labels. By default it's the one associated to the given metric.
+- `labelOrientation` The orientation strategy. Either horizontal labels with moving anchor point, or label rotating with the axis.
+- `divisions` The number of labels to display.
+- `textAnchor`/`dominantBaseline` The label placement. Can either be a string, or a function with the `angle` value (in degree) as an argument.
+
+{{"demo": "DemoRadarAxis.js" }}
+
 ## Highlight
 
 ### Axis highlight

docs/data/chartsApiPages.ts

@@ -258,6 +258,10 @@ const chartsApiPages: MuiPage[] = [
     pathname: '/x/api/charts/pie-plot',
     title: 'PiePlot',
   },
+  {
+    pathname: '/x/api/charts/radar-axis',
+    title: 'RadarAxis',
+  },
   {
     pathname: '/x/api/charts/radar-axis-highlight',
     title: 'RadarAxisHighlight',

docs/pages/x/api/charts/radar-axis.js

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

docs/pages/x/api/charts/radar-axis.json

@@ -0,0 +1,47 @@
+{
+  "props": {
+    "angle": { "type": { "name": "number" } },
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "divisions": { "type": { "name": "number" }, "default": "1" },
+    "dominantBaseline": {
+      "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" }
+    },
+    "labelOrientation": {
+      "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'rotated'" },
+      "default": "'horizontal'"
+    },
+    "metric": { "type": { "name": "string" } },
+    "textAnchor": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } }
+  },
+  "name": "RadarAxis",
+  "imports": [
+    "import { RadarAxis } from '@mui/x-charts/RadarChart';",
+    "import { RadarAxis } from '@mui/x-charts';",
+    "import { RadarAxis } from '@mui/x-charts-pro';"
+  ],
+  "classes": [
+    {
+      "key": "label",
+      "className": "MuiRadarAxis-label",
+      "description": "Styles applied to every label element.",
+      "isGlobal": false
+    },
+    {
+      "key": "line",
+      "className": "MuiRadarAxis-line",
+      "description": "Styles applied to the line element.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiRadarAxis-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    }
+  ],
+  "muiName": "MuiRadarAxis",
+  "filename": "/packages/x-charts/src/RadarChart/RadarAxis/RadarAxis.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/x/react-charts/radar/\">Charts - Radar</a></li></ul>",
+  "cssComponent": false
+}

docs/translations/api-docs/charts/radar-axis/radar-axis.json

@@ -0,0 +1,30 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "angle": {
+      "description": "The absolute rotation angle of the metrics (in degree) If not defined the metric angle will be used."
+    },
+    "classes": { "description": "Override or extend the styles applied to the component." },
+    "divisions": { "description": "The number of divisions with label." },
+    "dominantBaseline": {
+      "description": "The labels dominant baseline or a function returning the dominant baseline for a given axis angle (in degree)."
+    },
+    "labelOrientation": {
+      "description": "Defines how label align with the axis. - 'horizontal': labels stay horizontal and their placement change with the axis angle. - 'rotated': labels are rotated 90deg relatively to their axis."
+    },
+    "metric": {
+      "description": "The metric to get. If <code>undefined</code>, the hook returns <code>null</code>"
+    },
+    "textAnchor": {
+      "description": "The labels text anchor or a function returning the text anchor for a given axis angle (in degree)."
+    }
+  },
+  "classDescriptions": {
+    "label": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "every label element"
+    },
+    "line": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the line element" },
+    "root": { "description": "Styles applied to the root element." }
+  }
+}