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

package/PieChart/PieArcLabel.js

@@ -6,38 +6,39 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PieArcLabel = PieArcLabel;
+exports.PieArcLabel = void 0;
 exports.getPieArcLabelUtilityClass = getPieArcLabelUtilityClass;
 exports.pieArcLabelClasses = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+var _animation = require("../internals/animation/animation");
+var _useAnimatePieArcLabel = require("../hooks/animation/useAnimatePieArcLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
-const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded']);
+const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('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 (0, _composeClasses.default)(slots, getPieArcLabelUtilityClass, classes);
 };
-const PieArcLabelRoot = (0, _styles.styled)(_web.animated.text, {
+const PieArcLabelRoot = (0, _styles.styled)('text', {
   name: 'MuiPieArcLabel',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -47,29 +48,20 @@ const PieArcLabelRoot = (0, _styles.styled)(_web.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] = (0, _d3Shape.arc)().cornerRadius(cornerRadius).centroid({
-    padAngle,
-    startAngle,
-    endAngle,
-    innerRadius: arcLabelRadius,
-    outerRadius: arcLabelRadius
-  });
-  if (variable === 'x') {
-    return x;
+  pointerEvents: 'none',
+  animationName: 'animate-opacity',
+  animationDuration: '0s',
+  animationTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
+  [`&.${pieArcLabelClasses.animate}`]: {
+    animationDuration: `${_animation.ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-opacity': {
+    from: {
+      opacity: 0
+    }
   }
-  return y;
-};
-function PieArcLabel(props) {
+}));
+const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, ref) {
   const {
       id,
       classes: innerClasses,
@@ -77,12 +69,13 @@ function PieArcLabel(props) {
       startAngle,
       endAngle,
       paddingAngle,
-      arcLabelRadius,
+      innerRadius,
+      outerRadius,
       cornerRadius,
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      style
+      skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -90,32 +83,43 @@ function PieArcLabel(props) {
     classes: innerClasses,
     color,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error
-    (0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
-      className: classes.root
-    }, other, {
-      style: (0, _extends2.default)({
-        x: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'x')),
-        y: (0, _web.to)([startAngle, endAngle, paddingAngle, arcLabelRadius, cornerRadius], getLabelPosition(formattedArcLabel, 'y'))
-      }, style),
-      children: formattedArcLabel
-    }))
-  );
-}
+  const animatedProps = (0, _useAnimatePieArcLabel.useAnimatePieArcLabel)({
+    cornerRadius,
+    startAngle,
+    endAngle,
+    innerRadius,
+    outerRadius,
+    paddingAngle,
+    skipAnimation,
+    ref
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
+    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.default.number.isRequired,
   classes: _propTypes.default.object,
   color: _propTypes.default.string.isRequired,
+  cornerRadius: _propTypes.default.number.isRequired,
+  endAngle: _propTypes.default.number.isRequired,
   formattedArcLabel: _propTypes.default.string,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+  innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,
-  isHighlighted: _propTypes.default.bool.isRequired
+  isHighlighted: _propTypes.default.bool.isRequired,
+  outerRadius: _propTypes.default.number.isRequired,
+  paddingAngle: _propTypes.default.number.isRequired,
+  skipAnimation: _propTypes.default.bool.isRequired,
+  startAngle: _propTypes.default.number.isRequired
 } : void 0;

package/PieChart/PieArcLabelPlot.js

@@ -11,14 +11,11 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
-var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _PieArcLabel = require("./PieArcLabel");
 var _getLabel = require("../internals/getLabel");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const RATIO = 180 / Math.PI;
 function getItemLabel(arcLabel, arcLabelMinAngle, item) {
   if (!arcLabel) {
@@ -72,41 +69,26 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultLabelTransitionConfig)(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const ArcLabel = slots?.pieArcLabel ?? _PieArcLabel.PieArcLabel;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition((_ref, item) => {
-      let {
-          startAngle,
-          endAngle,
-          paddingAngle: pA,
-          innerRadius: iR,
-          outerRadius: oR,
-          arcLabelRadius: aLR,
-          cornerRadius: cR
-        } = _ref,
-        style = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded2);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
-        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__*/(0, _jsxRuntime.jsx)(ArcLabel, (0, _extends2.default)({
+      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/PieChart/PieArcPlot.js

@@ -11,9 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _web = require("@react-spring/web");
 var _PieArc = require("./PieArc");
-var _transition = require("./dataTransform/transition");
 var _useTransformData = require("./dataTransform/useTransformData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"];
@@ -45,43 +43,32 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultTransitionConfig)(skipAnimation), {
-    immediate: skipAnimation
-  }));
   if (data.length === 0) {
     return null;
   }
   const Arc = slots?.pieArc ?? _PieArc.PieArc;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: transition(({
-      startAngle,
-      endAngle,
-      paddingAngle: pA,
-      innerRadius: iR,
-      outerRadius: oR,
-      cornerRadius: cR
-    }, item, _, index) => {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
-        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__*/(0, _jsxRuntime.jsx)(Arc, (0, _extends2.default)({
+      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/PieChart/PiePlot.js

@@ -14,7 +14,7 @@ var _PieArcLabelPlot = require("./PieArcLabelPlot");
 var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _usePieSeries = require("../hooks/usePieSeries");
-var _AnimationProvider = require("../context/AnimationProvider");
+var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -41,7 +41,7 @@ function PiePlot(props) {
     width,
     height
   } = (0, _hooks.useDrawingArea)();
-  const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
+  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(inSkipAnimation);
   if (seriesData === undefined) {
     return null;
   }

package/PieChart/seriesConfig/tooltip.js

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

package/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/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -1,33 +1,78 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadarAxisHighlight = RadarAxisHighlight;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _RadarAxisSliceHighlight = require("./RadarAxisSliceHighlight");
-var _RadarAxisPointsHighlight = require("./RadarAxisPointsHighlight");
+var _useRadarAxisHighlight = require("./useRadarAxisHighlight");
 var _radarAxisHighlightClasses = require("./radarAxisHighlightClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     line: ['line'],
-    slice: ['slice'],
     dot: ['dot']
   };
   return (0, _composeClasses.default)(slots, _radarAxisHighlightClasses.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__*/(0, _jsxRuntime.jsx)(_RadarAxisSliceHighlight.RadarAxisSliceHighlight, {
-    classes: classes
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisPointsHighlight.RadarAxisPointsHighlight, {
-    classes: classes
+  const theme = (0, _styles.useTheme)();
+  const data = (0, _useRadarAxisHighlight.useRadarAxisHighlight)();
+  if (data === null) {
+    return null;
+  }
+  const {
+    center,
+    series,
+    points,
+    radius,
+    highlightedAngle,
+    instance
+  } = data;
+  const [x, y] = instance.polar2svg(radius, highlightedAngle);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
+        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 = {
@@ -35,13 +80,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.default.oneOf(['points', 'slice']).isRequired,
   /**
    * Override or extend the styles applied to the component.
    */

package/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/RadarChart/RadarAxisHighlight/radarAxisHighlightClasses.js

@@ -11,4 +11,4 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getRadarAxisHighlightUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiRadarAxisHighlight', slot);
 }
-const chartsAxisHighlightClasses = exports.chartsAxisHighlightClasses = (0, _generateUtilityClasses.default)('MuiRadarAxisHighlight', ['root', 'line', 'slice', 'dot']);
+const chartsAxisHighlightClasses = exports.chartsAxisHighlightClasses = (0, _generateUtilityClasses.default)('MuiRadarAxisHighlight', ['root', 'line', 'dot']);

package/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/RadarChart/RadarChart.js

@@ -21,6 +21,7 @@ var _RadarDataProvider = require("./RadarDataProvider/RadarDataProvider");
 var _RadarSeriesPlot = require("./RadarSeriesPlot");
 var _RadarAxisHighlight = require("./RadarAxisHighlight");
 var _RadarMetricLabels = require("./RadarMetricLabels");
+var _ChartsTooltip = require("../ChartsTooltip");
 var _jsxRuntime = require("react/jsx-runtime");
 const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function RadarChart(inProps, ref) {
   const props = (0, _styles.useThemeProps)({
@@ -32,17 +33,17 @@ const RadarChart = exports.RadarChart = /*#__PURE__*/React.forwardRef(function R
     chartsSurfaceProps,
     radarDataProviderProps,
     radarGrid,
-    radarAxisHighlight,
     overlayProps,
     legendProps,
     highlight,
     children
   } = (0, _useRadarChartProps.useRadarChartProps)(props);
+  const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarDataProvider.RadarDataProvider, (0, _extends2.default)({}, radarDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
       children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
         ref: ref,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesPlot, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, (0, _extends2.default)({}, radarAxisHighlight)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), children]
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarGrid.RadarGrid, (0, _extends2.default)({}, radarGrid)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarMetricLabels.RadarMetricLabels, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesArea, {}), highlight === 'axis' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarAxisHighlight.RadarAxisHighlight, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadarSeriesPlot.RadarSeriesMarks, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({}, props.slotProps?.tooltip)), children]
       }))]
     }))
   }));
@@ -55,18 +56,7 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
   apiRef: _propTypes.default.shape({
     current: _propTypes.default.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.default.oneOf(['points', 'slice']),
   children: _propTypes.default.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: _propTypes.default.object,
   className: _propTypes.default.string,
   /**
    * Color palette used to colorize multiple series.
@@ -173,6 +163,13 @@ process.env.NODE_ENV !== "production" ? RadarChart.propTypes = {
    * @default {}
    */
   slots: _propTypes.default.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.default.func,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,

package/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/RadarChart/RadarDataProvider/RadarDataProvider.js

@@ -179,7 +179,7 @@ process.env.NODE_ENV !== "production" ? RadarDataProvider.propTypes = {
    */
   series: _propTypes.default.arrayOf(_propTypes.default.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.default.object,

package/RadarChart/RadarGrid/CircularRadarGrid.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CircularRadarGrid = CircularRadarGrid;
 var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -16,9 +15,10 @@ function CircularRadarGrid(props) {
     center,
     corners,
     divisions,
-    radius
+    radius,
+    strokeColor,
+    classes
   } = props;
-  const theme = (0, _styles.useTheme)();
   const divisionRadius = Array.from({
     length: divisions
   }, (_, index) => radius * (index + 1) / divisions);
@@ -28,16 +28,20 @@ function CircularRadarGrid(props) {
       y
     }, i) => /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.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/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;