@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/esm/PieChart/PieArcLabel.js

@@ -2,33 +2,34 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, to } from '@react-spring/web';
-import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
+import { useAnimatePieArcLabel } from "../hooks/animation/useAnimatePieArcLabel.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getPieArcLabelUtilityClass(slot) {
   return generateUtilityClass('MuiPieArcLabel', slot);
 }
-export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+export const pieArcLabelClasses = generateUtilityClasses('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', !skipAnimation && 'animate']
   };
   return composeClasses(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = styled(animated.text, {
+const PieArcLabelRoot = styled('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -38,29 +39,20 @@ const PieArcLabelRoot = styled(animated.text, {
   fill: (theme.vars || theme).palette.text.primary,
   textAnchor: 'middle',
   dominantBaseline: 'middle',
-  pointerEvents: 'none'
-}));
-/**
- * Helper to compute label position.
- * It's not an inline function because we need it in interpolation.
- */
-const getLabelPosition = (formattedArcLabel, variable) => (startAngle, endAngle, padAngle, arcLabelRadius, cornerRadius) => {
-  if (!formattedArcLabel) {
-    return 0;
-  }
-  const [x, y] = d3Arc().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
+  pointerEvents: 'none',
+  animationName: 'animate-opacity',
+  animationDuration: '0s',
+  animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  [`&.${pieArcLabelClasses.animate}`]: {
+    animationDuration: `${ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-opacity': {
+    from: {
+      opacity: 0
+    }
   }
-  return y;
-};
-function PieArcLabel(props) {
+}));
+const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
       id,
       classes: innerClasses,
@@ -68,12 +60,13 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      arcLabelRadius,
+      innerRadius,
+      outerRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      style
+      skipAnimation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -81,33 +74,44 @@ function PieArcLabel(props) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error
-    _jsx(PieArcLabelRoot, _extends({
-      className: classes.root
-    }, other, {
-      style: _extends({
-        x: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-        y: to([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-      }, style),
-      children: formattedArcLabel
-    }))
-  );
-}
+  const animatedProps = useAnimatePieArcLabel({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
+  return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
+    className: classes.root
+  }, other, animatedProps, {
+    children: formattedArcLabel
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  arcLabelRadius: PropTypes.number.isRequired,
   classes: PropTypes.object,
   color: PropTypes.string.isRequired,
+  cornerRadius: PropTypes.number.isRequired,
+  endAngle: PropTypes.number.isRequired,
   formattedArcLabel: PropTypes.string,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,
-  isHighlighted: PropTypes.bool.isRequired
+  isHighlighted: PropTypes.bool.isRequired,
+  outerRadius: PropTypes.number.isRequired,
+  paddingAngle: PropTypes.number.isRequired,
+  skipAnimation: PropTypes.bool.isRequired,
+  startAngle: PropTypes.number.isRequired
 } : void 0;
 export { PieArcLabel };

package/esm/PieChart/PieArcLabelPlot.js

@@ -2,12 +2,9 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],
-  _excluded2 = ["startAngle", "endAngle", "paddingAngle", "innerRadius", "outerRadius", "arcLabelRadius", "cornerRadius"];
+const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
-import { getDefaultLabelTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { PieArcLabel } from "./PieArcLabel.js";
 import { getLabel } from "../internals/getLabel.js";
@@ -65,41 +62,26 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, getDefaultLabelTransitionConfig(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? PieArcLabel;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = _objectWithoutPropertiesLoose(_ref, _excluded2);
-      return /*#__PURE__*/_jsx(ArcLabel, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        arcLabelRadius: aLR,
-        cornerRadius: cR,
-        style: style,
-        id: id,
-        color: item.color,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item)
-      }, slotProps?.pieArcLabel));
-    })
+    children: transformedData.map(item => /*#__PURE__*/_jsx(ArcLabel, _extends({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      arcLabelRadius: item.arcLabelRadius,
+      cornerRadius: item.cornerRadius,
+      id: id,
+      color: item.color,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      formattedArcLabel: getItemLabel(arcLabel, arcLabelMinAngle, item),
+      skipAnimation: skipAnimation ?? false
+    }, slotProps?.pieArcLabel), item.id ?? item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {

package/esm/PieChart/PieArcPlot.js

@@ -5,9 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTransition } from '@react-spring/web';
 import { PieArc } from "./PieArc.js";
-import { getDefaultTransitionConfig } from "./dataTransform/transition.js";
 import { useTransformData } from "./dataTransform/useTransformData.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 function PieArcPlot(props) {
@@ -38,43 +36,32 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = useTransition(transformedData, _extends({}, getDefaultTransitionConfig(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? PieArc;
   return /*#__PURE__*/_jsx("g", _extends({}, other, {
-    children: transition(({
-      startAngle,
-      endAngle,
-      paddingAngle: pA,
-      innerRadius: iR,
-      outerRadius: oR,
-      cornerRadius: cR
-    }, item, _, index) => {
-      return /*#__PURE__*/_jsx(Arc, _extends({
-        startAngle: startAngle,
-        endAngle: endAngle,
-        paddingAngle: pA,
-        innerRadius: iR,
-        outerRadius: oR,
-        cornerRadius: cR,
-        id: id,
-        color: item.color,
-        dataIndex: index,
-        isFaded: item.isFaded,
-        isHighlighted: item.isHighlighted,
-        onClick: onItemClick && (event => {
-          onItemClick(event, {
-            type: 'pie',
-            seriesId: id,
-            dataIndex: index
-          }, item);
-        })
-      }, slotProps?.pieArc));
-    })
+    children: transformedData.map((item, index) => /*#__PURE__*/_jsx(Arc, _extends({
+      startAngle: item.startAngle,
+      endAngle: item.endAngle,
+      paddingAngle: item.paddingAngle,
+      innerRadius: item.innerRadius,
+      outerRadius: item.outerRadius,
+      cornerRadius: item.cornerRadius,
+      skipAnimation: skipAnimation ?? false,
+      id: id,
+      color: item.color,
+      dataIndex: index,
+      isFaded: item.isFaded,
+      isHighlighted: item.isHighlighted,
+      onClick: onItemClick && (event => {
+        onItemClick(event, {
+          type: 'pie',
+          seriesId: id,
+          dataIndex: index
+        }, item);
+      })
+    }, slotProps?.pieArc), item.dataIndex))
   }));
 }
 process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {

package/esm/PieChart/PiePlot.js

@@ -7,7 +7,7 @@ import { PieArcLabelPlot } from "./PieArcLabelPlot.js";
 import { getPercentageValue } from "../internals/getPercentageValue.js";
 import { getPieCoordinates } from "./getPieCoordinates.js";
 import { usePieSeriesContext } from "../hooks/usePieSeries.js";
-import { useSkipAnimation } from "../context/AnimationProvider/index.js";
+import { useSkipAnimation } from "../hooks/useSkipAnimation.js";
 import { useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**

package/esm/PieChart/seriesConfig/tooltip.js

@@ -10,6 +10,9 @@ const tooltipGetter = params => {
     return null;
   }
   const point = series.data[identifier.dataIndex];
+  if (point == null) {
+    return null;
+  }
   const label = getLabel(point.label, 'tooltip');
   const value = _extends({}, point, {
     label

package/esm/RadarChart/RadarAxisHighlight/RadarAxisHighlight.d.ts

@@ -1,19 +1,12 @@
 import * as React from 'react';
 import { RadarAxisHighlightClasses } from "./radarAxisHighlightClasses.js";
 export interface RadarAxisHighlightProps {
-  /**
-   * Switch between different axis highlight visualization.
-   * - points: display points on each highlighted value. Recommended for radar with multiple series.
-   * - slice: display a slice around the highlighted value. Recommended for radar with a single series.
-   * The default value is computed depending on the number of series provided.
-   */
-  axisHighlightShape: 'points' | 'slice';
   /**
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<RadarAxisHighlightClasses>;
 }
-declare function RadarAxisHighlight(props: RadarAxisHighlightProps): React.JSX.Element;
+declare function RadarAxisHighlight(props: RadarAxisHighlightProps): React.JSX.Element | null;
 declare namespace RadarAxisHighlight {
   var propTypes: any;
 }

package/esm/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -1,25 +1,70 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
-import { RadarAxisSliceHighlight } from "./RadarAxisSliceHighlight.js";
-import { RadarAxisPointsHighlight } from "./RadarAxisPointsHighlight.js";
+import { useRadarAxisHighlight } from "./useRadarAxisHighlight.js";
 import { getRadarAxisHighlightUtilityClass } from "./radarAxisHighlightClasses.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     line: ['line'],
-    slice: ['slice'],
     dot: ['dot']
   };
   return composeClasses(slots, getRadarAxisHighlightUtilityClass, classes);
 };
+/**
+ * Attributes to display a shadow around a mark.
+ */
+const highlightMarkShadow = {
+  r: 7,
+  opacity: 0.3
+};
+
+/**
+ * Attributes to display a mark.
+ */
+const highlightMark = {
+  r: 3,
+  opacity: 1
+};
 function RadarAxisHighlight(props) {
   const classes = useUtilityClasses(props.classes);
-  return props.axisHighlightShape === 'slice' ? /*#__PURE__*/_jsx(RadarAxisSliceHighlight, {
-    classes: classes
-  }) : /*#__PURE__*/_jsx(RadarAxisPointsHighlight, {
-    classes: classes
+  const theme = useTheme();
+  const data = useRadarAxisHighlight();
+  if (data === null) {
+    return null;
+  }
+  const {
+    center,
+    series,
+    points,
+    radius,
+    highlightedAngle,
+    instance
+  } = data;
+  const [x, y] = instance.polar2svg(radius, highlightedAngle);
+  return /*#__PURE__*/_jsxs("g", {
+    className: classes.root,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: `M ${center.cx} ${center.cy} L ${x} ${y}`,
+      stroke: (theme.vars || theme).palette.text.primary,
+      strokeWidth: 1,
+      className: classes.line,
+      pointerEvents: "none",
+      strokeDasharray: "4 4"
+    }), points.map(({
+      highlighted
+    }, seriesIndex) => {
+      return /*#__PURE__*/_jsx("circle", _extends({
+        fill: series[seriesIndex].color,
+        cx: highlighted.x,
+        cy: highlighted.y,
+        className: classes.dot,
+        pointerEvents: "none"
+      }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? RadarAxisHighlight.propTypes = {
@@ -27,13 +72,6 @@ process.env.NODE_ENV !== "production" ? RadarAxisHighlight.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * Switch between different axis highlight visualization.
-   * - points: display points on each highlighted value. Recommended for radar with multiple series.
-   * - slice: display a slice around the highlighted value. Recommended for radar with a single series.
-   * The default value is computed depending on the number of series provided.
-   */
-  axisHighlightShape: PropTypes.oneOf(['points', 'slice']).isRequired,
   /**
    * Override or extend the styles applied to the component.
    */

package/esm/RadarChart/RadarAxisHighlight/radarAxisHighlightClasses.d.ts

@@ -3,8 +3,6 @@ export interface RadarAxisHighlightClasses {
   root: string;
   /** Styles applied to the highlighted axis line element. */
   line: string;
-  /** Styles applied to every highlight slice. */
-  slice: string;
   /** Styles applied to every highlight dot. */
   dot: string;
 }

package/esm/RadarChart/RadarAxisHighlight/radarAxisHighlightClasses.js

@@ -3,4 +3,4 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getRadarAxisHighlightUtilityClass(slot) {
   return generateUtilityClass('MuiRadarAxisHighlight', slot);
 }
-export const chartsAxisHighlightClasses = generateUtilityClasses('MuiRadarAxisHighlight', ['root', 'line', 'slice', 'dot']);
+export const chartsAxisHighlightClasses = generateUtilityClasses('MuiRadarAxisHighlight', ['root', 'line', 'dot']);

package/esm/RadarChart/RadarChart.d.ts

@@ -1,11 +1,13 @@
 import * as React from 'react';
-import { ChartsOverlayProps } from "../ChartsOverlay/ChartsOverlay.js";
+import { ChartsLegendSlotProps, ChartsLegendSlots } from "../ChartsLegend/index.js";
+import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "../ChartsOverlay/ChartsOverlay.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
 import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
-export interface RadarChartSlots {}
-export interface RadarChartSlotProps {}
-export interface RadarChartProps extends RadarDataProviderProps, RadarGridProps, Partial<RadarAxisHighlightProps>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
+import { ChartsTooltipSlotProps, ChartsTooltipSlots } from "../ChartsTooltip/index.js";
+export interface RadarChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsLegendSlots {}
+export interface RadarChartSlotProps extends ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsLegendSlotProps {}
+export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * If `true`, the legend is not rendered.
    */

package/esm/RadarChart/RadarChart.js

@@ -11,9 +11,10 @@ import { ChartsSurface } from "../ChartsSurface/index.js";
 import { ChartsWrapper } from "../internals/components/ChartsWrapper/index.js";
 import { RadarGrid } from "./RadarGrid/index.js";
 import { RadarDataProvider } from "./RadarDataProvider/RadarDataProvider.js";
-import { RadarSeriesPlot } from "./RadarSeriesPlot/index.js";
+import { RadarSeriesArea, RadarSeriesMarks } from "./RadarSeriesPlot/index.js";
 import { RadarAxisHighlight } from "./RadarAxisHighlight/index.js";
 import { RadarMetricLabels } from "./RadarMetricLabels/index.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, ref) {
   const props = useThemeProps({
@@ -25,17 +26,17 @@ const RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, re
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
-    radarAxisHighlight,
     overlayProps,
     legendProps,
     highlight,
     children
   } = useRadarChartProps(props);
+  const Tooltip = props.slots?.tooltip ?? ChartsTooltip;
   return /*#__PURE__*/_jsx(RadarDataProvider, _extends({}, radarDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, _extends({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
         ref: ref,
-        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesPlot, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, _extends({}, radarAxisHighlight)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), children]
+        children: [/*#__PURE__*/_jsx(RadarGrid, _extends({}, radarGrid)), /*#__PURE__*/_jsx(RadarMetricLabels, {}), /*#__PURE__*/_jsx(RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/_jsx(RadarAxisHighlight, {}), /*#__PURE__*/_jsx(RadarSeriesMarks, {}), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), !props.loading && /*#__PURE__*/_jsx(Tooltip, _extends({}, props.slotProps?.tooltip)), children]
       }))]
     }))
   }));
@@ -48,18 +49,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: PropTypes.shape({
     current: PropTypes.object
   }),
-  /**
-   * Switch between different axis highlight visualization.
-   * - points: display points on each highlighted value. Recommended for radar with multiple series.
-   * - slice: display a slice around the highlighted value. Recommended for radar with a single series.
-   * The default value is computed depending on the number of series provided.
-   */
-  axisHighlightShape: PropTypes.oneOf(['points', 'slice']),
   children: PropTypes.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
   className: PropTypes.string,
   /**
    * Color palette used to colorize multiple series.
@@ -166,6 +156,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default {}
    */
   slots: PropTypes.object,
+  /**
+   * Get stripe fill color. Set it to `null` to remove stripes
+   * @param {number} index The index of the stripe band.
+   * @returns {string} The color to fill the stripe.
+   * @default (index) => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
+   */
+  stripeColor: PropTypes.func,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   theme: PropTypes.oneOf(['dark', 'light']),
   title: PropTypes.string,

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.d.ts

@@ -12,7 +12,7 @@ export interface RadarDataProviderProps extends Omit<ChartContainerProps<'radar'
    * The series to display in the bar chart.
    * An array of [[RadarSeriesType]] objects.
    */
-  series: MakeOptional<RadarSeriesType, 'type'>[];
+  series: Readonly<MakeOptional<RadarSeriesType, 'type'>>[];
   /**
    * The configuration of the radar scales.
    */

package/esm/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -172,7 +172,7 @@ process.env.NODE_ENV !== "production" ? RadarDataProvider.propTypes = {
    */
   series: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
-   * The configuration helpers used to compute attributes according to the serries type.
+   * The configuration helpers used to compute attributes according to the series type.
    * @ignore Unstable props for internal usage.
    */
   seriesConfig: PropTypes.object,

package/esm/RadarChart/RadarGrid/CircularRadarGrid.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useTheme } from '@mui/material/styles';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * @ignore - internal component.
@@ -9,9 +8,10 @@ export function CircularRadarGrid(props) {
     center,
     corners,
     divisions,
-    radius
+    radius,
+    strokeColor,
+    classes
   } = props;
-  const theme = useTheme();
   const divisionRadius = Array.from({
     length: divisions
   }, (_, index) => radius * (index + 1) / divisions);
@@ -21,16 +21,20 @@ export function CircularRadarGrid(props) {
       y
     }, i) => /*#__PURE__*/_jsx("path", {
       d: `M ${center.x} ${center.y} L ${x} ${y}`,
-      stroke: (theme.vars || theme).palette.text.primary,
+      stroke: strokeColor,
       strokeWidth: 1,
-      fill: "none"
+      strokeOpacity: 0.3,
+      fill: "none",
+      className: classes?.radial
     }, i)), divisionRadius.map(r => /*#__PURE__*/_jsx("circle", {
       cx: center.x,
       cy: center.y,
       r: r,
-      stroke: (theme.vars || theme).palette.text.primary,
+      stroke: strokeColor,
       strokeWidth: 1,
-      fill: "none"
+      strokeOpacity: 0.3,
+      fill: "none",
+      className: classes?.divider
     }, r))]
   });
 }

package/esm/RadarChart/RadarGrid/CircularRadarStripes.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { RadarGridStripeRenderProps } from "./RadarGrid.types.js";
+/**
+ * @ignore - internal component.
+ */
+export declare function CircularRadarStripes(props: RadarGridStripeRenderProps): React.JSX.Element;

package/esm/RadarChart/RadarGrid/CircularRadarStripes.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+const getPath = (center, outerRadius, innerRadius) => [`M ${center.x - outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x + outerRadius} ${center.y}`, `A ${outerRadius} ${outerRadius} 0 1 0 ${center.x - outerRadius} ${center.y} Z`, `M ${center.x - innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x + innerRadius} ${center.y}`, `A ${innerRadius} ${innerRadius} 0 1 0 ${center.x - innerRadius} ${center.y} Z`].join('');
+
+/**
+ * @ignore - internal component.
+ */
+export function CircularRadarStripes(props) {
+  const {
+    center,
+    divisions,
+    radius,
+    stripeColor,
+    classes
+  } = props;
+  const divisionRadius = Array.from({
+    length: divisions
+  }, (_, index) => radius * (index + 1) / divisions);
+  return /*#__PURE__*/_jsx(React.Fragment, {
+    children: divisionRadius.map((r, index) => {
+      const smallerRadius = divisionRadius[index - 1] ?? 0;
+      return /*#__PURE__*/_jsx("path", {
+        d: getPath(center, r, smallerRadius),
+        fillRule: "evenodd",
+        fill: stripeColor?.(index) ?? 'none',
+        fillOpacity: 0.1,
+        className: classes?.stripe
+      }, r);
+    })
+  });
+}