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

package/LineChart/LineElement.d.ts

@@ -9,6 +9,11 @@ export interface LineElementClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${lineElementClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type LineElementClassKey = keyof LineElementClasses;
 export interface LineElementOwnerState {

package/LineChart/LineElement.js

@@ -25,7 +25,7 @@ const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps",
 function getLineElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLineElement', slot);
 }
-const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded']);
+const lineElementClasses = exports.lineElementClasses = (0, _generateUtilityClasses.default)('MuiLineElement', ['root', 'highlighted', 'faded', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/LineChart/LinePlot.js

@@ -20,7 +20,7 @@ var _getCurve = require("../internals/getCurve");
 var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
 var _useLineSeries = require("../hooks/useLineSeries");
-var _AnimationProvider = require("../context/AnimationProvider");
+var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartGradientId = require("../hooks/useChartGradientId");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
@@ -151,7 +151,7 @@ function LinePlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
-  const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
+  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({}, other, {
     children: completedData.map(({

package/LineChart/MarkPlot.js

@@ -12,7 +12,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _constants = require("../constants");
-var _AnimationProvider = require("../context/AnimationProvider");
+var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartId = require("../hooks/useChartId");
 var _useScale = require("../hooks/useScale");
 var _useLineSeries = require("../hooks/useLineSeries");
@@ -44,7 +44,7 @@ function MarkPlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isZoomInteracting = (0, _useInternalIsZoomInteracting.useInternalIsZoomInteracting)();
-  const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
+  const skipAnimation = (0, _useSkipAnimation.useSkipAnimation)(isZoomInteracting || inSkipAnimation);
   const seriesData = (0, _useLineSeries.useLineSeriesContext)();
   const {
     xAxis,

package/LineChart/markElementClasses.d.ts

@@ -8,6 +8,11 @@ export interface MarkElementClasses {
   faded: string;
   /** Styles applied to the root element when animation is not skipped. */
   animate: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${markElementClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type MarkElementClassKey = keyof MarkElementClasses;
 export interface MarkElementOwnerState {

package/LineChart/markElementClasses.js

@@ -12,7 +12,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 function getMarkElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiMarkElement', slot);
 }
-const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate']);
+const markElementClasses = exports.markElementClasses = (0, _generateUtilityClasses.default)('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/LineChart/seriesConfig/getColor.js

@@ -9,6 +9,9 @@ const getColor = (series, xAxis, yAxis) => {
   const xColorScale = xAxis?.colorScale;
   if (yColorScale) {
     return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
       const value = series.data[dataIndex];
       const color = value === null ? series.color : yColorScale(value);
       if (color === null) {
@@ -19,6 +22,9 @@ const getColor = (series, xAxis, yAxis) => {
   }
   if (xColorScale) {
     return dataIndex => {
+      if (dataIndex === undefined) {
+        return series.color;
+      }
       const value = xAxis.data?.[dataIndex];
       const color = value === null ? series.color : xColorScale(value);
       if (color === null) {

package/PieChart/PieArc.d.ts

@@ -7,6 +7,11 @@ export interface PieArcClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${pieArcClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type PieArcClassKey = keyof PieArcClasses;
 interface PieArcOwnerState {

package/PieChart/PieArc.js

@@ -25,7 +25,7 @@ const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighligh
 function getPieArcUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArc', slot);
 }
-const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded']);
+const pieArcClasses = exports.pieArcClasses = (0, _generateUtilityClasses.default)('MuiPieArc', ['root', 'highlighted', 'faded', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/PieChart/PieArcLabel.d.ts

@@ -9,6 +9,11 @@ export interface PieArcLabelClasses {
   faded: string;
   /** Styles applied to the root element when animation is not skipped. */
   animate: string;
+  /**
+   * Styles applied to the root element for a specified series.
+   * Needs to be suffixed with the series ID: `.${pieArcLabelClasses.series}-${seriesId}`.
+   */
+  series: string;
 }
 export type PieArcLabelClassKey = keyof PieArcLabelClasses;
 interface PieArcLabelOwnerState {

package/PieChart/PieArcLabel.js

@@ -24,7 +24,7 @@ const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingA
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
-const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate']);
+const pieArcLabelClasses = exports.pieArcLabelClasses = (0, _generateUtilityClasses.default)('MuiPieArcLabel', ['root', 'highlighted', 'faded', 'animate', 'series']);
 const useUtilityClasses = ownerState => {
   const {
     classes,

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/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;

package/RadarChart/RadarGrid/CircularRadarStripes.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircularRadarStripes = CircularRadarStripes;
+var React = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("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.
+ */
+function CircularRadarStripes(props) {
+  const {
+    center,
+    divisions,
+    radius,
+    stripeColor,
+    classes
+  } = props;
+  const divisionRadius = Array.from({
+    length: divisions
+  }, (_, index) => radius * (index + 1) / divisions);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(React.Fragment, {
+    children: divisionRadius.map((r, index) => {
+      const smallerRadius = divisionRadius[index - 1] ?? 0;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: getPath(center, r, smallerRadius),
+        fillRule: "evenodd",
+        fill: stripeColor?.(index) ?? 'none',
+        fillOpacity: 0.1,
+        className: classes?.stripe
+      }, r);
+    })
+  });
+}

package/RadarChart/RadarGrid/RadarGrid.js

@@ -8,16 +8,23 @@ Object.defineProperty(exports, "__esModule", {
 exports.RadarGrid = RadarGrid;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
 var _useRadarGridData = require("./useRadarGridData");
 var _SharpRadarGrid = require("./SharpRadarGrid");
 var _CircularRadarGrid = require("./CircularRadarGrid");
+var _SharpRadarStripes = require("./SharpRadarStripes");
+var _CircularRadarStripes = require("./CircularRadarStripes");
+var _radarGridClasses = require("./radarGridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 function RadarGrid(props) {
+  const theme = (0, _styles.useTheme)();
   const {
     divisions = 5,
-    shape = 'sharp'
+    shape = 'sharp',
+    stripeColor = index => index % 2 === 1 ? (theme.vars || theme).palette.text.secondary : 'none'
   } = props;
   const gridData = (0, _useRadarGridData.useRadarGridData)();
+  const classes = (0, _radarGridClasses.useUtilityClasses)(props.classes);
   if (gridData === null) {
     return null;
   }
@@ -26,16 +33,38 @@ function RadarGrid(props) {
     corners,
     radius
   } = gridData;
-  return shape === 'sharp' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarGrid.SharpRadarGrid, {
-    divisions: divisions,
-    corners: corners,
-    center: center,
-    radius: radius
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularRadarGrid.CircularRadarGrid, {
-    divisions: divisions,
-    corners: corners,
-    center: center,
-    radius: radius
+  return shape === 'sharp' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [stripeColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarStripes.SharpRadarStripes, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      stripeColor: stripeColor,
+      classes: classes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_SharpRadarGrid.SharpRadarGrid, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      strokeColor: (theme.vars || theme).palette.text.primary,
+      classes: classes
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [stripeColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularRadarStripes.CircularRadarStripes, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      stripeColor: stripeColor,
+      classes: classes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CircularRadarGrid.CircularRadarGrid, {
+      divisions: divisions,
+      corners: corners,
+      center: center,
+      radius: radius,
+      strokeColor: (theme.vars || theme).palette.text.primary,
+      classes: classes
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? RadarGrid.propTypes = {
@@ -43,6 +72,10 @@ process.env.NODE_ENV !== "production" ? RadarGrid.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.default.object,
   /**
    * The number of divisions in the radar grid.
    * @default 5
@@ -52,5 +85,12 @@ process.env.NODE_ENV !== "production" ? RadarGrid.propTypes = {
    * The grid shape.
    * @default 'sharp'
    */
-  shape: _propTypes.default.oneOf(['circular', 'sharp'])
+  shape: _propTypes.default.oneOf(['circular', 'sharp']),
+  /**
+   * 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
 } : void 0;

package/RadarChart/RadarGrid/RadarGrid.types.d.ts

@@ -1,3 +1,4 @@
+import { RadarGridClasses } from "./radarGridClasses.js";
 export interface RadarGridProps {
   /**
    * The number of divisions in the radar grid.
@@ -9,8 +10,32 @@ export interface RadarGridProps {
    * @default 'sharp'
    */
   shape?: 'sharp' | 'circular';
+  /**
+   * 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?: ((index: number) => string) | null;
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<RadarGridClasses>;
+}
+export interface RadarGridRenderProps extends Pick<RadarGridProps, 'classes'> {
+  center: {
+    x: number;
+    y: number;
+  };
+  corners: {
+    x: number;
+    y: number;
+  }[];
+  divisions: number;
+  radius: number;
+  strokeColor: string;
 }
-export interface RadarGridRenderProps {
+export interface RadarGridStripeRenderProps extends Pick<RadarGridProps, 'stripeColor' | 'classes'> {
   center: {
     x: number;
     y: number;