Repository: mui/mui-x
Pull request #16940: [charts] Radar add option to highlighting series
Author: login: alexfauquette
Labels: name: type: enhancement
description: It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.
name: scope: charts
description: Changes related to the charts.
Created: 2025-03-12T13:14:08Z | Merged: 2025-03-13T08:52:53Z

Nothing special to mention here


Diff:
diff --git a/docs/data/charts/radar/DemoRadarSeriesHighlight.js b/docs/data/charts/radar/DemoRadarSeriesHighlight.js
new file mode 100644
index 0000000000000..e04fbb0036ed3
--- /dev/null
+++ b/docs/data/charts/radar/DemoRadarSeriesHighlight.js
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+
+function valueFormatter(v) {
+  if (v === null) {
+    return 'NaN';
+  }
+  return `${v.toLocaleString()}t CO2eq/pers`;
+}
+
+export default function DemoRadarSeriesHighlight() {
+  const [highlightedItem, setHighlightedItem] = React.useState(null);
+
+  const handleHighLightedSeries = (event, newHighLightedSeries) => {
+    if (newHighLightedSeries !== null) {
+      setHighlightedItem((prev) => ({
+        ...prev,
+        seriesId: newHighLightedSeries,
+      }));
+    }
+  };
+  return (
+    <Stack spacing={2} alignItems={'center'}>
+      <ToggleButtonGroup
+        value={highlightedItem?.seriesId ?? null}
+        exclusive
+        onChange={handleHighLightedSeries}
+        aria-label="highlighted series"
+        fullWidth
+        size="small"
+      >
+        {series.map((item) => (
+          <ToggleButton
+            key={item.id}
+            value={item.id}
+            aria-label={`series ${item.label}`}
+          >
+            {item.label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      <RadarChart
+        height={300}
+        highlight="series"
+        highlightedItem={highlightedItem}
+        onHighlightChange={setHighlightedItem}
+        series={series}
+        radar={radar}
+      />
+    </Stack>
+  );
+}
+
+// Data from https://ourworldindata.org/emissions-by-fuel
+const series = [
+  {
+    id: 'usa',
+    label: 'USA',
+    data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
+    valueFormatter,
+  },
+  {
+    id: 'australia',
+    label: 'Australia',
+    data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
+    valueFormatter,
+  },
+  {
+    id: 'united-kingdom',
+    label: 'United Kingdom',
+    data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
+    valueFormatter,
+  },
+];
+
+const radar = {
+  metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other industry', 'Cement'],
+};
diff --git a/docs/data/charts/radar/DemoRadarSeriesHighlight.tsx b/docs/data/charts/radar/DemoRadarSeriesHighlight.tsx
new file mode 100644
index 0000000000000..461888ea2e0c5
--- /dev/null
+++ b/docs/data/charts/radar/DemoRadarSeriesHighlight.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
+import { HighlightItemData } from '@mui/x-charts/context';
+
+function valueFormatter(v: number | null) {
+  if (v === null) {
+    return 'NaN';
+  }
+  return `${v.toLocaleString()}t CO2eq/pers`;
+}
+
+export default function DemoRadarSeriesHighlight() {
+  const [highlightedItem, setHighlightedItem] =
+    React.useState<HighlightItemData | null>(null);
+
+  const handleHighLightedSeries = (event: any, newHighLightedSeries: string) => {
+    if (newHighLightedSeries !== null) {
+      setHighlightedItem((prev) => ({
+        ...prev,
+        seriesId: newHighLightedSeries,
+      }));
+    }
+  };
+  return (
+    <Stack spacing={2} alignItems={'center'}>
+      <ToggleButtonGroup
+        value={highlightedItem?.seriesId ?? null}
+        exclusive
+        onChange={handleHighLightedSeries}
+        aria-label="highlighted series"
+        fullWidth
+        size="small"
+      >
+        {series.map((item) => (
+          <ToggleButton
+            key={item.id}
+            value={item.id}
+            aria-label={`series ${item.label}`}
+          >
+            {item.label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+      <RadarChart
+        height={300}
+        highlight="series"
+        highlightedItem={highlightedItem}
+        onHighlightChange={setHighlightedItem}
+        series={series}
+        radar={radar}
+      />
+    </Stack>
+  );
+}
+
+// Data from https://ourworldindata.org/emissions-by-fuel
+const series = [
+  {
+    id: 'usa',
+    label: 'USA',
+    data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
+    valueFormatter,
+  },
+  {
+    id: 'australia',
+    label: 'Australia',
+    data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
+    valueFormatter,
+  },
+  {
+    id: 'united-kingdom',
+    label: 'United Kingdom',
+    data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
+    valueFormatter,
+  },
+];
+const radar = {
+  metrics: ['Oil', 'Coal', 'Gas', 'Flaring', 'Other industry', 'Cement'],
+};
diff --git a/docs/data/charts/radar/MultiSeriesRadar.js b/docs/data/charts/radar/MultiSeriesRadar.js
index 49d92d8ac7db6..2c9ca0b8158ce 100644
--- a/docs/data/charts/radar/MultiSeriesRadar.js
+++ b/docs/data/charts/radar/MultiSeriesRadar.js
@@ -3,8 +3,6 @@ import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
 
 // Data from https://ourworldindata.org/emissions-by-fuel
 
-const highlightScope = { highlight: 'item', fade: 'global' };
-
 function valueFormatter(v) {
   if (v === null) {
     return 'NaN';
@@ -17,22 +15,15 @@ export default function MultiSeriesRadar() {
     <RadarChart
       height={300}
       series={[
-        {
-          label: 'USA',
-          data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
-          highlightScope,
-          valueFormatter,
-        },
+        { label: 'USA', data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], valueFormatter },
         {
           label: 'Australia',
           data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
-          highlightScope,
           valueFormatter,
         },
         {
           label: 'United Kingdom',
           data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
-          highlightScope,
           valueFormatter,
         },
       ]}
diff --git a/docs/data/charts/radar/MultiSeriesRadar.tsx b/docs/data/charts/radar/MultiSeriesRadar.tsx
index 0d6364bea86a3..2058eb691524a 100644
--- a/docs/data/charts/radar/MultiSeriesRadar.tsx
+++ b/docs/data/charts/radar/MultiSeriesRadar.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
 import { Unstable_RadarChart as RadarChart } from '@mui/x-charts/RadarChart';
-import { HighlightScope } from '@mui/x-charts/context';
 
 // Data from https://ourworldindata.org/emissions-by-fuel
 
-const highlightScope: HighlightScope = { highlight: 'item', fade: 'global' };
-
 function valueFormatter(v: number | null) {
   if (v === null) {
     return 'NaN';
@@ -18,22 +15,15 @@ export default function MultiSeriesRadar() {
     <RadarChart
       height={300}
       series={[
-        {
-          label: 'USA',
-          data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12],
-          highlightScope,
-          valueFormatter,
-        },
+        { label: 'USA', data: [6.65, 2.76, 5.15, 0.19, 0.07, 0.12], valueFormatter },
         {
           label: 'Australia',
           data: [5.52, 5.5, 3.19, 0.51, 0.15, 0.11],
-          highlightScope,
           valueFormatter,
         },
         {
           label: 'United Kingdom',
           data: [2.26, 0.29, 2.03, 0.05, 0.04, 0.06],
-          highlightScope,
           valueFormatter,
         },
       ]}
diff --git a/docs/data/charts/radar/radar.md b/docs/data/charts/radar/radar.md
index 4da3e2695a642..57dcd22a2835d 100644
--- a/docs/data/charts/radar/radar.md
+++ b/docs/data/charts/radar/radar.md
@@ -58,7 +58,7 @@ The radar chart displays a grid behind the series that can be configured with:
 
 ### Item click 🚧
 
-## Highlight 🚧
+## Highlight
 
 ### Axis Highlight
 
@@ -72,6 +72,25 @@ With composition you can add this behavior with the `<RadarAxisHighlight axisHig
 
 {{"demo": "DemoRadarAxisHighlight.js" }}
 
+### Series Highlight
+
+To set the highlight on series, use the `highlight` prop with `'series'` value.
+This highlight can be controlled with `highlightedItem` value and `onHighlightChange` callback.
+
+With composition you can pass those props to the `RadarDataProvider`.
+
+This demo shows a controlled highlight.
+Notice the impact of the series order in the highlight interaction.
+The UK series is the last item of the `series` prop.
+Such that its area renders on top of the others.
+Otherwise, the other area would catch the pointer event, making it impossible to highlight it.
+
+{{"demo": "DemoRadarSeriesHighlight.js" }}
+
+### Disabling Highlight
+
+To remove highlight, set the `highlight` prop to `'none'`.
+
 ## Tooltip 🚧
 
 ## Composition 🚧
@@ -83,6 +102,6 @@ If you miss some element or explanation, please open an issue describing what yo
 
 In this example, we uses `RadarSeriesArea` and `RadarSeriesMarks` to modify the order of the elements:
 all the marks are on top of all the path.
-Additionaly, we apply different properties based on the series id.
+Additionally, we apply different properties based on the series id.
 
 {{"demo": "CompositionExample.js" }}
diff --git a/docs/pages/x/api/charts/radar-data-provider.json b/docs/pages/x/api/charts/radar-data-provider.json
index ab1e557d19c76..383cddf7f5dc1 100644
--- a/docs/pages/x/api/charts/radar-data-provider.json
+++ b/docs/pages/x/api/charts/radar-data-provider.json
@@ -17,6 +17,13 @@
     },
     "disableAxisListener": { "type": { "name": "bool" }, "default": "false" },
     "height": { "type": { "name": "number" } },
+    "highlight": {
+      "type": {
+        "name": "enum",
+        "description": "'axis'<br>&#124;&nbsp;'none'<br>&#124;&nbsp;'series'"
+      },
+      "default": "'axis'"
+    },
     "highlightedItem": {
       "type": {
         "name": "shape",
diff --git a/docs/pages/x/api/charts/radar-series-plot.json b/docs/pages/x/api/charts/radar-series-plot.json
index bd1ef077625d3..8c91b1bfef719 100644
--- a/docs/pages/x/api/charts/radar-series-plot.json
+++ b/docs/pages/x/api/charts/radar-series-plot.json
@@ -1,12 +1,34 @@
 {
-  "props": { "seriesId": { "type": { "name": "string" } } },
+  "props": {
+    "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
+    "seriesId": { "type": { "name": "string" } }
+  },
   "name": "RadarSeriesPlot",
   "imports": [
     "import { RadarSeriesPlot } from '@mui/x-charts/RadarChart';",
     "import { RadarSeriesPlot } from '@mui/x-charts';",
     "import { RadarSeriesPlot } from '@mui/x-charts-pro';"
   ],
-  "classes": [],
+  "classes": [
+    {
+      "key": "faded",
+      "className": "MuiRadarSeriesPlot-faded",
+      "description": "Styles applied to the series element if it is faded.",
+      "isGlobal": false
+    },
+    {
+      "key": "highlighted",
+      "className": "MuiRadarSeriesPlot-highlighted",
+      "description": "Styles applied to the series element if it is highlighted.",
+      "isGlobal": false
+    },
+    {
+      "key": "root",
+      "className": "MuiRadarSeriesPlot-root",
+      "description": "Styles applied to the root element.",
+      "isGlobal": false
+    }
+  ],
   "muiName": "MuiRadarSeriesPlot",
   "filename": "/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx",
   "inheritance": null,
diff --git a/docs/translations/api-docs/charts/radar-data-provider/radar-data-provider.json b/docs/translations/api-docs/charts/radar-data-provider/radar-data-provider.json
index 18c31bb95ed0a..c791424b3e05b 100644
--- a/docs/translations/api-docs/charts/radar-data-provider/radar-data-provider.json
+++ b/docs/translations/api-docs/charts/radar-data-provider/radar-data-provider.json
@@ -8,6 +8,9 @@
     "height": {
       "description": "The height of the chart in px. If not defined, it takes the height of the parent element."
     },
+    "highlight": {
+      "description": "Indicates if the chart should highlight items per axis or per series."
+    },
     "highlightedItem": {
       "description": "The highlighted item. Used when the highlight is controlled."
     },
diff --git a/docs/translations/api-docs/charts/radar-series-plot/radar-series-plot.json b/docs/translations/api-docs/charts/radar-series-plot/radar-series-plot.json
index c98d76833f20b..476fe842366f5 100644
--- a/docs/translations/api-docs/charts/radar-series-plot/radar-series-plot.json
+++ b/docs/translations/api-docs/charts/radar-series-plot/radar-series-plot.json
@@ -1,9 +1,22 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "classes": { "description": "Override or extend the styles applied to the component." },
     "seriesId": {
       "description": "The id of the series to display. If undefined all series are displayed."
     }
   },
-  "classDescriptions": {}
+  "classDescriptions": {
+    "faded": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the series element",
+      "conditions": "it is faded"
+    },
+    "highlighted": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the series element",
+      "conditions": "it is highlighted"
+    },
+    "root": { "description": "Styles applied to the root element." }
+  }
 }
diff --git a/packages/x-charts/src/RadarChart/RadarChart.tsx b/packages/x-charts/src/RadarChart/RadarChart.tsx
index e4291d14aa862..ae4fabcacfaf3 100644
--- a/packages/x-charts/src/RadarChart/RadarChart.tsx
+++ b/packages/x-charts/src/RadarChart/RadarChart.tsx
@@ -21,11 +21,6 @@ export interface RadarChartProps
     RadarGridProps,
     Partial<RadarAxisHighlightProps>,
     Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
-  /**
-   * Indicates if the chart should highlight items per axis or per series.
-   * @default 'axis'
-   */
-  highlight?: 'axis' | 'series' | 'none';
   /**
    * If `true`, the legend is not rendered.
    */
diff --git a/packages/x-charts/src/RadarChart/RadarDataProvider/RadarDataProvider.tsx b/packages/x-charts/src/RadarChart/RadarDataProvider/RadarDataProvider.tsx
index 62085171cff1a..faec37b44f91e 100644
--- a/packages/x-charts/src/RadarChart/RadarDataProvider/RadarDataProvider.tsx
+++ b/packages/x-charts/src/RadarChart/RadarDataProvider/RadarDataProvider.tsx
@@ -46,6 +46,11 @@ export interface RadarDataProviderProps
    * The configuration of the radar scales.
    */
   radar: RadarConfig;
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight?: 'axis' | 'series' | 'none';
 }
 
 function RadarDataProvider(props: RadarDataProviderProps) {
@@ -61,6 +66,7 @@ function RadarDataProvider(props: RadarDataProviderProps) {
     skipAnimation,
     margin,
     radar,
+    highlight,
     ...other
   } = props;
 
@@ -100,9 +106,12 @@ function RadarDataProvider(props: RadarDataProviderProps) {
     () =>
       series.map((s) => ({
         type: 'radar' as const,
+        highlightScope:
+          s.highlightScope ??
+          (highlight === 'series' ? { highlight: 'series', fade: 'global' } : undefined),
         ...s,
       })),
-    [series],
+    [series, highlight],
   );
 
   const defaultizedMargin = React.useMemo(
@@ -157,6 +166,11 @@ RadarDataProvider.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * Indicates if the chart should highlight items per axis or per series.
+   * @default 'axis'
+   */
+  highlight: PropTypes.oneOf(['axis', 'none', 'series']),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
diff --git a/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx b/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx
index 37658835288a3..b8d9d28bbfadb 100644
--- a/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx
+++ b/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.tsx
@@ -3,30 +3,51 @@ import PropTypes from 'prop-types';
 import { useRadarSeriesData } from './useRadarSeriesData';
 import { RadarSeriesPlotProps } from './RadarSeriesPlot.types';
 import { getAreaPath } from './getAreaPath';
+import { useInteractionAllItemProps } from '../../hooks/useInteractionItemProps';
+import { useItemHighlightedGetter } from '../../hooks/useItemHighlightedGetter';
+import { useUtilityClasses } from './radarSeriesPlotClasses';
 
 function RadarSeriesPlot(props: RadarSeriesPlotProps) {
   const seriesCoordinates = useRadarSeriesData(props.seriesId);
 
+  const interactionProps = useInteractionAllItemProps(seriesCoordinates);
+  const { isFaded, isHighlighted } = useItemHighlightedGetter();
+
+  const classes = useUtilityClasses(props.classes);
+
   return (
-    <React.Fragment>
-      {seriesCoordinates?.map(({ seriesId, points, color, showMark }) => (
-        <g key={seriesId}>
-          {
-            <path
-              key={seriesId}
-              d={getAreaPath(points)}
-              fill={color}
-              stroke={color}
-              fillOpacity={0.4}
-            />
-          }
-          {showMark &&
-            points.map((point, index) => (
-              <circle key={index} cx={point.x} cy={point.y} r={5} fill={color} stroke={color} />
-            ))}
-        </g>
-      ))}
-    </React.Fragment>
+    <g className={classes.root}>
+      {seriesCoordinates?.map(({ seriesId, points, color, showMark }, seriesIndex) => {
+        const isItemHighlighted = isHighlighted({ seriesId });
+        const isItemFaded = !isItemHighlighted && isFaded({ seriesId });
+
+        return (
+          <g key={seriesId}>
+            {
+              <path
+                key={seriesId}
+                d={getAreaPath(points)}
+                {...interactionProps[seriesIndex]}
+                className={
+                  (isItemHighlighted && classes.highlighted) ||
+                  (isItemFaded && classes.faded) ||
+                  undefined
+                }
+                fill={color}
+                stroke={color}
+                filter={isItemHighlighted ? 'brightness(120%)' : undefined}
+                strokeOpacity={isItemFaded ? 0.5 : 1}
+                fillOpacity={isItemFaded ? 0.1 : 0.4}
+              />
+            }
+            {showMark &&
+              points.map((point, index) => (
+                <circle key={index} cx={point.x} cy={point.y} r={5} fill={color} stroke={color} />
+              ))}
+          </g>
+        );
+      })}
+    </g>
   );
 }
 
@@ -35,6 +56,10 @@ RadarSeriesPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
   /**
    * The id of the series to display.
    * If undefined all series are displayed.
diff --git a/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.ts b/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.ts
index f279d69b57b94..f9be505995a06 100644
--- a/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.ts
+++ b/packages/x-charts/src/RadarChart/RadarSeriesPlot/RadarSeriesPlot.types.ts
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { RadarSeriesPlotClasses } from './radarSeriesPlotClasses';
 
 interface CommonRadarSeriesPlotProps {
   /**
@@ -8,7 +9,12 @@ interface CommonRadarSeriesPlotProps {
   seriesId?: string;
 }
 
-export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {}
+export interface RadarSeriesPlotProps extends CommonRadarSeriesPlotProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<RadarSeriesPlotClasses>;
+}
 
 export interface RadarSeriesMarksProps
   extends CommonRadarSeriesPlotProps,
diff --git a/packages/x-charts/src/RadarChart/RadarSeriesPlot/index.ts b/packages/x-charts/src/RadarChart/RadarSeriesPlot/index.ts
index e3a99b6227e63..d0dcd9315ab8b 100644
--- a/packages/x-charts/src/RadarChart/RadarSeriesPlot/index.ts
+++ b/packages/x-charts/src/RadarChart/RadarSeriesPlot/index.ts
@@ -2,3 +2,5 @@ export * from './RadarSeriesPlot';
 export type * from './RadarSeriesPlot.types';
 export * from './RadarSeriesArea';
 export * from './RadarSeriesMarks';
+export type { RadarSeriesPlotClasses, RadarSeriesPlotClassKey } from './radarSeriesPlotClasses';
+export { radarSeriesPlotClasses } from './radarSeriesPlotClasses';
diff --git a/packages/x-charts/src/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.ts b/packages/x-charts/src/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.ts
new file mode 100644
index 0000000000000..f2750475148ac
--- /dev/null
+++ b/packages/x-charts/src/RadarChart/RadarSeriesPlot/radarSeriesPlotClasses.ts
@@ -0,0 +1,34 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+export interface RadarSeriesPlotClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the series element if it is highlighted. */
+  highlighted: string;
+  /** Styles applied to the series element if it is faded. */
+  faded: string;
+}
+
+export type RadarSeriesPlotClassKey = keyof RadarSeriesPlotClasses;
+
+export function getRadarSeriesPlotUtilityClass(slot: string) {
+  return generateUtilityClass('MuiRadarSeriesPlot', slot);
+}
+
+export const radarSeriesPlotClasses = generateUtilityClasses('MuiRadarSeriesPlot', [
+  'root',
+  'highlighted',
+  'faded',
+]);
+
+export const useUtilityClasses = (classes?: Partial<RadarSeriesPlotClasses>) => {
+  const slots = {
+    root: ['root'],
+    highlighted: ['highlighted'],
+    faded: ['faded'],
+  };
+
+  return composeClasses(slots, getRadarSeriesPlotUtilityClass, classes);
+};
diff --git a/packages/x-charts/src/RadarChart/useRadarChartProps.ts b/packages/x-charts/src/RadarChart/useRadarChartProps.ts
index aff93c257d120..0c4b730a489c3 100644
--- a/packages/x-charts/src/RadarChart/useRadarChartProps.ts
+++ b/packages/x-charts/src/RadarChart/useRadarChartProps.ts
@@ -43,6 +43,7 @@ export const useRadarChartProps = (props: RadarChartProps) => {
   const radarDataProviderProps: RadarDataProviderProps = {
     series,
     radar,
+    highlight,
     width,
     height,
     margin: defaultizeMargin(margin, { top: 30, bottom: 30, left: 50, right: 50 }),
diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json
index fb57f0d0f8c63..a60f980ac6347 100644
--- a/scripts/x-charts-pro.exports.json
+++ b/scripts/x-charts-pro.exports.json
@@ -311,6 +311,9 @@
   { "name": "RadarSeriesMarks", "kind": "Function" },
   { "name": "RadarSeriesMarksProps", "kind": "Interface" },
   { "name": "RadarSeriesPlot", "kind": "Function" },
+  { "name": "radarSeriesPlotClasses", "kind": "Variable" },
+  { "name": "RadarSeriesPlotClasses", "kind": "Interface" },
+  { "name": "RadarSeriesPlotClassKey", "kind": "TypeAlias" },
   { "name": "RadarSeriesPlotProps", "kind": "Interface" },
   { "name": "RadarSeriesType", "kind": "Interface" },
   { "name": "rainbowSurgePalette", "kind": "Variable" },
diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json
index 393c9d7600380..4ba98423edf26 100644
--- a/scripts/x-charts.exports.json
+++ b/scripts/x-charts.exports.json
@@ -280,6 +280,9 @@
   { "name": "RadarSeriesMarks", "kind": "Function" },
   { "name": "RadarSeriesMarksProps", "kind": "Interface" },
   { "name": "RadarSeriesPlot", "kind": "Function" },
+  { "name": "radarSeriesPlotClasses", "kind": "Variable" },
+  { "name": "RadarSeriesPlotClasses", "kind": "Interface" },
+  { "name": "RadarSeriesPlotClassKey", "kind": "TypeAlias" },
   { "name": "RadarSeriesPlotProps", "kind": "Interface" },
   { "name": "RadarSeriesType", "kind": "Interface" },
   { "name": "rainbowSurgePalette", "kind": "Variable" },


Reviews:
user: login: JCQuintas
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-12T15:40:58Z
user: login: bernardobelchior
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-13T07:35:38Z
user: login: bernardobelchior
state: APPROVED
author_association: MEMBER
submitted_at: 2025-03-13T07:35:40Z
user: login: alexfauquette
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-03-13T08:18:24Z

Review comments:
diff_hunk: @@ -72,6 +72,19 @@ With composition you can add this behavior with the `<RadarAxisHighlight axisHig
 
 {{"demo": "DemoRadarAxisHighlight.js" }}
 
+### Series Highlight
+
+To set the highlight on series, use the `highlight` prop with `'series'` value.
+This highlight can be controlled with `highlightedItem` value and `onHighlightChange` callback.
+
+With composition you can pass those props to the `RadarDataProvider`.
+
+{{"demo": "DemoRadarSeriesHighlight.js" }}
path: docs/data/charts/radar/radar.md
user: login: bernardobelchior
body: Would it make sense to explain what defines the order in which series are highlighted? 

I suppose it's the same order as the legend, but I was slightly confused at first

https://github.com/user-attachments/assets/9340c133-ab68-4de7-81dd-8aea044ad6a3


created_at: 2025-03-13T07:35:38Z
author_association: MEMBER
diff_hunk: @@ -72,6 +72,19 @@ With composition you can add this behavior with the `<RadarAxisHighlight axisHig
 
 {{"demo": "DemoRadarAxisHighlight.js" }}
 
+### Series Highlight
+
+To set the highlight on series, use the `highlight` prop with `'series'` value.
+This highlight can be controlled with `highlightedItem` value and `onHighlightChange` callback.
+
+With composition you can pass those props to the `RadarDataProvider`.
+
+{{"demo": "DemoRadarSeriesHighlight.js" }}
path: docs/data/charts/radar/radar.md
user: login: alexfauquette
body: I tried an explaination, but not 100% convinced
created_at: 2025-03-13T08:18:24Z
author_association: MEMBER

PR comments:
user: login: mui-bot
created_at: 2025-03-12T13:18:02Z
body: 
<!--
  0 failure: 
  0 warning: 
  
  2 markdown notices
  DangerID: danger-id-Danger;
-->



**Deploy preview:** <a href="https://deploy-preview-16940--material-ui-x.netlify.app/">https://deploy-preview-16940--material-ui-x.netlify.app/</a>



**Updated pages:**

- [docs/data/charts/radar/radar.md](https://deploy-preview-16940--material-ui-x.netlify.app/x/react-charts/radar/)

<p align="right">
  Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against d7e7935411f5315339bf9e32fb4ad2ac9599b45b
</p>

author_association: NONE
user: login: codspeed-hq[bot]
created_at: 2025-03-12T13:21:42Z
body: <!-- __CODSPEED_PERFORMANCE_REPORT_COMMENT__ -->
<!-- __CODSPEED_INSTRUMENTATION_PERFORMANCE_REPORT_COMMENT__ -->

## [CodSpeed Performance Report](https://codspeed.io/mui/mui-x/branches/alexfauquette%3Aradar-series-highlight)

### Merging #16940 will **not alter performance**

<sub>Comparing <code>alexfauquette:radar-series-highlight</code> (d7e7935) with <code>master</code> (06d8025)</sub>



### Summary

`✅ 7` untouched benchmarks  




author_association: NONE