@mui/x-charts 8.7.0 → 8.9.0

package/ChartDataProvider/useChartDataProviderProps.js

@@ -11,7 +11,12 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _styles = require("@mui/material/styles");
 var _allPlugins = require("../internals/plugins/allPlugins");
 const _excluded = ["children", "localeText", "plugins", "seriesConfig", "slots", "slotProps"];
-const useChartDataProviderProps = props => {
+const useChartDataProviderProps = inProps => {
+  // eslint-disable-next-line material-ui/mui-name-matches-component-name
+  const props = (0, _styles.useThemeProps)({
+    props: inProps,
+    name: 'MuiChartDataProvider'
+  });
   const {
       children,
       localeText,

package/ChartsAxisHighlight/ChartsXAxisHighlight.d.ts

@@ -7,4 +7,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsXHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -26,32 +26,42 @@ var _jsxRuntime = require("react/jsx-runtime");
     top,
     height
   } = (0, _hooks.useDrawingArea)();
-  const xScale = (0, _useScale.useXScale)();
   const store = (0, _useStore.useStore)();
-  const axisXValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisValue);
-  const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-  const isBandScaleX = type === 'band' && axisXValue !== null && (0, _isBandScale.isBandScale)(xScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleX && xScale(axisXValue) === undefined;
-    if (isError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
+  const axisXValues = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisValue);
+  const xAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartXAxis);
+  if (axisXValues.length === 0) {
+    return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [isBandScaleX && xScale(axisXValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
-    // @ts-expect-error, xScale value is checked in the statement above
-    , {
-      d: `M ${xScale(axisXValue) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), type === 'line' && axisXValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${getXPosition(axisXValue)} ${top} L ${getXPosition(axisXValue)} ${top + height}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
+  return axisXValues.map(({
+    axisId,
+    value
+  }) => {
+    const xAxis = xAxes.axis[axisId];
+    const xScale = xAxis.scale;
+    const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
+    const isBandScaleX = type === 'band' && value !== null && (0, _isBandScale.isBandScale)(xScale);
+    if (process.env.NODE_ENV !== 'production') {
+      const isError = isBandScaleX && xScale(value) === undefined;
+      if (isError) {
+        console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
-    })]
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [isBandScaleX && xScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath
+      // @ts-expect-error, xScale value is checked in the statement above
+      , {
+        d: `M ${xScale(value) - (xScale.step() - xScale.bandwidth()) / 2} ${top} l ${xScale.step()} 0 l 0 ${height} l ${-xScale.step()} 0 Z`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'band'
+        }
+      }), type === 'line' && value !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+        d: `M ${getXPosition(value)} ${top} L ${getXPosition(value)} ${top + height}`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'line'
+        }
+      })]
+    }, `${axisId}-${value}`);
   });
 }

package/ChartsAxisHighlight/ChartsYAxisHighlight.d.ts

@@ -7,4 +7,4 @@ import { ChartsAxisHighlightClasses } from "./chartsAxisHighlightClasses.js";
 export default function ChartsYHighlight(props: {
   type: ChartsAxisHighlightType;
   classes: ChartsAxisHighlightClasses;
-}): React.JSX.Element;
+}): React.JSX.Element[] | null;

package/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -26,32 +26,42 @@ var _jsxRuntime = require("react/jsx-runtime");
     left,
     width
   } = (0, _hooks.useDrawingArea)();
-  const yScale = (0, _useScale.useYScale)();
   const store = (0, _useStore.useStore)();
-  const axisYValue = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionYAxisValue);
-  const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
-  const isBandScaleY = type === 'band' && axisYValue !== null && (0, _isBandScale.isBandScale)(yScale);
-  if (process.env.NODE_ENV !== 'production') {
-    const isError = isBandScaleY && yScale(axisYValue) === undefined;
-    if (isError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
-    }
+  const axisYValues = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightYAxisValue);
+  const yAxes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartYAxis);
+  if (axisYValues.length === 0) {
+    return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [isBandScaleY && yScale(axisYValue) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${left} ${
-      // @ts-expect-error, yScale value is checked in the statement above
-      yScale(axisYValue) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'band'
-      }
-    }), type === 'line' && axisYValue !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
-      d: `M ${left} ${getYPosition(axisYValue)} L ${left + width} ${getYPosition(axisYValue)}`,
-      className: classes.root,
-      ownerState: {
-        axisHighlight: 'line'
+  return axisYValues.map(({
+    axisId,
+    value
+  }) => {
+    const yAxis = yAxes.axis[axisId];
+    const yScale = yAxis.scale;
+    const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
+    const isBandScaleY = type === 'band' && value !== null && (0, _isBandScale.isBandScale)(yScale);
+    if (process.env.NODE_ENV !== 'production') {
+      const isError = isBandScaleY && yScale(value) === undefined;
+      if (isError) {
+        console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
       }
-    })]
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+      children: [isBandScaleY && yScale(value) !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+        d: `M ${left} ${
+        // @ts-expect-error, yScale value is checked in the statement above
+        yScale(value) - (yScale.step() - yScale.bandwidth()) / 2} l 0 ${yScale.step()} l ${width} 0 l 0 ${-yScale.step()} Z`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'band'
+        }
+      }), type === 'line' && value !== null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlightPath.ChartsAxisHighlightPath, {
+        d: `M ${left} ${getYPosition(value)} L ${left + width} ${getYPosition(value)}`,
+        className: classes.root,
+        ownerState: {
+          axisHighlight: 'line'
+        }
+      })]
+    }, `${axisId}-${value}`);
   });
 }

package/ChartsLabel/ChartsLabelMark.d.ts

@@ -6,12 +6,13 @@ export interface ChartsLabelCustomMarkProps {
   /** Color of the series this mark refers to. */
   color?: string;
 }
+export type ChartsLabelMarkType = 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
 export interface ChartsLabelMarkProps {
   /**
    * The type of the mark.
    * @default 'square'
    */
-  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
+  type?: ChartsLabelMarkType;
   /**
    * The color of the mark.
    */

package/ChartsLabel/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./ChartsLabel.js";
 export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from "./ChartsLabelMark.js";
 export { ChartsLabelMark } from "./ChartsLabelMark.js";
 export { labelClasses } from "./labelClasses.js";

package/ChartsLabel/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  ChartsLabelMark: true,
+  labelClasses: true,
+  labelMarkClasses: true,
+  labelGradientClasses: true
+};
 Object.defineProperty(exports, "ChartsLabelMark", {
   enumerable: true,
   get: function () {
@@ -27,6 +33,18 @@ Object.defineProperty(exports, "labelMarkClasses", {
     return _labelMarkClasses.labelMarkClasses;
   }
 });
+var _ChartsLabel = require("./ChartsLabel");
+Object.keys(_ChartsLabel).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ChartsLabel[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsLabel[key];
+    }
+  });
+});
 var _ChartsLabelMark = require("./ChartsLabelMark");
 var _labelClasses = require("./labelClasses");
 var _labelMarkClasses = require("./labelMarkClasses");

package/ChartsLegend/chartsLegendClasses.d.ts

@@ -16,5 +16,5 @@ export interface ChartsLegendClasses {
   /** Styles applied to the legend in row layout. */
   horizontal: string;
 }
-export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "series", string>;
+export declare const useUtilityClasses: (props: ChartsLegendProps & ChartsLegendSlotExtension) => Record<"item" | "series" | "root" | "label" | "mark", string>;
 export declare const legendClasses: ChartsLegendClasses;

package/ChartsLegend/piecewiseColorLegendClasses.d.ts

@@ -24,5 +24,5 @@ export interface PiecewiseColorLegendClasses {
   /** Styles applied to the series label. */
   label: string;
 }
-export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"root" | "label" | "mark" | "item" | "minLabel" | "maxLabel", string>;
+export declare const useUtilityClasses: (props: PiecewiseColorLegendProps & ChartsLegendSlotExtension) => Record<"item" | "root" | "label" | "mark" | "minLabel" | "maxLabel", string>;
 export declare const piecewiseColorLegendClasses: PiecewiseColorLegendClasses;

package/Gauge/GaugeContainer.d.ts

@@ -3,7 +3,7 @@ import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { GaugeProviderProps } from "./GaugeProvider.js";
 import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
 import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/LineChart/LineChart.d.ts

@@ -18,12 +18,13 @@ import { LineChartPluginsSignatures } from "./LineChart.plugins.js";
 import { ChartsToolbarSlots, ChartsToolbarSlotProps } from "../Toolbar/index.js";
 export interface LineChartSlots extends ChartsAxisSlots, AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface LineChartSlotProps extends ChartsAxisSlotProps, AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
+export type LineSeries = MakeOptional<LineSeriesType, 'type'>;
 export interface LineChartProps extends Omit<ChartContainerProps<'line', LineChartPluginsSignatures>, 'series' | 'plugins' | 'zAxis'>, Omit<ChartsAxisProps, 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'> {
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
-  series: Readonly<MakeOptional<LineSeriesType, 'type'>[]>;
+  series: Readonly<LineSeries[]>;
   /**
    * Option to display a cartesian grid in the background.
    */

package/LineChart/LineChart.js

@@ -118,6 +118,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.shape({
+    preferStrictDomainInLineCharts: _propTypes.default.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -133,6 +139,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: _propTypes.default.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -184,6 +198,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when a line element is clicked.
    */
@@ -194,7 +216,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
   onMarkClick: _propTypes.default.func,
   /**
    * The series to display in the line chart.
-   * An array of [[LineSeriesType]] objects.
+   * An array of [[LineSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**

package/LineChart/LineHighlightPlot.js

@@ -52,8 +52,8 @@ function LineHighlightPlot(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const highlightedIndex = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisIndex);
-  if (highlightedIndex === null) {
+  const highlightedIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  if (highlightedIndexes.length === 0) {
     return null;
   }
   if (seriesData === undefined) {
@@ -67,7 +67,10 @@ function LineHighlightPlot(props) {
   const defaultYAxisId = yAxisIds[0];
   const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: stackingGroups.flatMap(({
+    children: highlightedIndexes.flatMap(({
+      dataIndex: highlightedIndex,
+      axisId: highlightedAxisId
+    }) => stackingGroups.flatMap(({
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
@@ -82,6 +85,9 @@ function LineHighlightPlot(props) {
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
+        if (highlightedAxisId !== xAxisId) {
+          return null;
+        }
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
@@ -103,7 +109,7 @@ function LineHighlightPlot(props) {
           shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
-    })
+    }))
   }));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {

package/LineChart/MarkPlot.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _useChartCartesianInteraction = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors");
 var _constants = require("../constants");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartId = require("../hooks/useChartId");
@@ -24,6 +23,7 @@ var _MarkElement = require("./MarkElement");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useSelector = require("../internals/store/useSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
@@ -65,7 +65,21 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = (0, _hooks.useItemHighlightedGetter)();
-  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianInteraction.selectorChartsInteractionXAxisIndex);
+  const xAxisHighlightIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  const highlightedItems = React.useMemo(() => {
+    const rep = {};
+    for (const {
+      dataIndex,
+      axisId
+    } of xAxisHighlightIndexes) {
+      if (rep[axisId] === undefined) {
+        rep[axisId] = new Set([dataIndex]);
+      } else {
+        rep[axisId].add(dataIndex);
+      }
+    }
+    return rep;
+  }, [xAxisHighlightIndexes]);
   if (seriesData === undefined) {
     return null;
   }
@@ -163,7 +177,7 @@ function MarkPlot(props) {
                 seriesId,
                 dataIndex: index
               })),
-              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
               isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })

package/LineChart/useAreaPlotData.js

@@ -40,9 +40,10 @@ function useAreaPlotData(xAxes, yAxes) {
           connectNulls,
           baseline,
           curve,
-          strictStepCurve
+          strictStepCurve,
+          area
         } = series[seriesId];
-        if (!(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+        if (!area || !(xAxisId in xAxes) || !(yAxisId in yAxes)) {
           continue;
         }
         const xScale = xAxes[xAxisId].scale;

package/PieChart/PieArcLabelPlot.js

@@ -152,6 +152,9 @@ process.env.NODE_ENV !== "production" ? PieArcLabelPlot.propTypes = {
     outerRadius: _propTypes.default.number,
     paddingAngle: _propTypes.default.number
   }),
+  /**
+   * The id of this series.
+   */
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/PieChart/PieArcPlot.js

@@ -123,6 +123,9 @@ process.env.NODE_ENV !== "production" ? PieArcPlot.propTypes = {
     outerRadius: _propTypes.default.number,
     paddingAngle: _propTypes.default.number
   }),
+  /**
+   * The id of this series.
+   */
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * The radius between circle center and the beginning of the arc.

package/PieChart/PieChart.d.ts

@@ -12,12 +12,13 @@ import { ChartsOverlayProps, ChartsOverlaySlotProps, ChartsOverlaySlots } from "
 import { PieChartPluginSignatures } from "./PieChart.plugins.js";
 export interface PieChartSlots extends PiePlotSlots, ChartsLegendSlots, ChartsOverlaySlots, ChartsTooltipSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface PieChartSlotProps extends PiePlotSlotProps, ChartsLegendSlotProps, ChartsOverlaySlotProps, ChartsTooltipSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
+export type PieSeries = MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>;
+export interface PieChartProps extends Omit<ChartContainerProps<'pie', PieChartPluginSignatures>, 'series' | 'slots' | 'slotProps' | 'experimentalFeatures'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<PiePlotProps, 'skipAnimation'> {
   /**
    * The series to display in the pie chart.
-   * An array of [[PieSeriesType]] objects.
+   * An array of [[PieSeries]] objects.
    */
-  series: Readonly<MakeOptional<PieSeriesType<MakeOptional<PieValueType, 'id'>>, 'type'>[]>;
+  series: Readonly<PieSeries[]>;
   /**
    * If `true`, the legend is not rendered.
    */

package/PieChart/PieChart.js

@@ -180,7 +180,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   onItemClick: _propTypes.default.func,
   /**
    * The series to display in the pie chart.
-   * An array of [[PieSeriesType]] objects.
+   * An array of [[PieSeries]] objects.
    */
   series: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
   /**

package/PieChart/pieClasses.d.ts

@@ -9,4 +9,4 @@ export interface PieClasses {
 export type PieClassKey = keyof PieClasses;
 export declare function getPieUtilityClass(slot: string): string;
 export declare const pieClasses: PieClasses;
-export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"root" | "series" | "seriesLabels", string>;
+export declare const useUtilityClasses: (classes?: Partial<PieClasses>) => Record<"series" | "root" | "seriesLabels", string>;

package/RadarChart/RadarAxisHighlight/RadarAxisHighlight.js

@@ -62,13 +62,11 @@ function RadarAxisHighlight(props) {
       className: classes.line,
       pointerEvents: "none",
       strokeDasharray: "4 4"
-    }), points.map(({
-      highlighted
-    }, seriesIndex) => {
+    }), points.map((point, seriesIndex) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
         fill: series[seriesIndex].color,
-        cx: highlighted.x,
-        cy: highlighted.y,
+        cx: point.x,
+        cy: point.y,
         className: classes.dot,
         pointerEvents: "none"
       }, series[seriesIndex].hideMark ? highlightMark : highlightMarkShadow), series[seriesIndex].id);

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.d.ts

@@ -2,12 +2,6 @@ import { UseChartPolarAxisSignature } from "../../internals/plugins/featurePlugi
 import { AxisId } from "../../models/axis.js";
 import { DefaultizedRadarSeriesType } from "../../models/seriesType/radar.js";
 import { ChartInstance } from "../../internals/plugins/models/index.js";
-interface UseRadarAxisHighlightParams {
-  /**
-   * If true, coordinates of the previous/next point will be added.
-   */
-  includesNeighbors?: boolean;
-}
 interface UseRadarAxisHighlightReturnValue {
   /**
    * The radar center.
@@ -40,7 +34,7 @@ interface UseRadarAxisHighlightReturnValue {
    * The { x, y, value } values for the highlighted points in the same order as the `series` array.
    * If `includesNeighbors` is set to `true` it also contains the information for `previous` and `next` data point.
    */
-  points: Points[];
+  points: Point[];
   /**
    * Charts instances giving access to `polar2svg` and `svg2polar` helpers.
    */
@@ -53,10 +47,5 @@ interface Point {
   angle: number;
   value: number;
 }
-interface Points {
-  highlighted: Point;
-  previous?: Point;
-  next?: Point;
-}
-export declare function useRadarAxisHighlight(params?: UseRadarAxisHighlightParams): UseRadarAxisHighlightReturnValue | null;
+export declare function useRadarAxisHighlight(): UseRadarAxisHighlightReturnValue | null;
 export {};

package/RadarChart/RadarAxisHighlight/useRadarAxisHighlight.js

@@ -12,10 +12,7 @@ var _useStore = require("../../internals/store/useStore");
 var _useChartContext = require("../../context/ChartProvider/useChartContext");
 var _useChartPolarAxis = require("../../internals/plugins/featurePlugins/useChartPolarAxis");
 var _useChartPolarInteraction = require("../../internals/plugins/featurePlugins/useChartPolarAxis/useChartPolarInteraction.selectors");
-function useRadarAxisHighlight(params) {
-  const {
-    includesNeighbors = false
-  } = params ?? {};
+function useRadarAxisHighlight() {
   const radarSeries = (0, _useRadarSeries.useRadarSeries)();
   const rotationScale = (0, _useScale.useRotationScale)();
   const {
@@ -55,48 +52,14 @@ function useRadarAxisHighlight(params) {
       const value = series.data[highlightedIndex];
       const r = radiusScale(value);
       const [x, y] = instance.polar2svg(r, angle);
-      const retrunedValue = {
-        highlighted: {
-          x,
-          y,
-          r,
-          angle,
-          value
-        }
+      const returnedValue = {
+        x,
+        y,
+        r,
+        angle,
+        value
       };
-      if (!includesNeighbors) {
-        return retrunedValue;
-      }
-      const dataLength = series.data.length;
-      const prevIndex = (dataLength + highlightedIndex - 1) % dataLength;
-      const nextIndex = (highlightedIndex + 1) % dataLength;
-      const prevValue = series.data[prevIndex];
-      const nextValue = series.data[nextIndex];
-      if (prevValue != null) {
-        const prevR = radiusAxis[radiusAxisIds[prevIndex]].scale(prevValue);
-        const prevAngle = rotationScale(rotationScale.domain()[prevIndex]);
-        const [px, py] = instance.polar2svg(prevR, prevAngle);
-        retrunedValue.previous = {
-          x: px,
-          y: py,
-          r: prevR,
-          angle: prevAngle,
-          value: prevValue
-        };
-      }
-      if (nextValue != null) {
-        const nextR = radiusAxis[radiusAxisIds[nextIndex]].scale(nextValue);
-        const nextAngle = rotationScale(rotationScale.domain()[nextIndex]);
-        const [nx, ny] = instance.polar2svg(nextR, nextAngle);
-        retrunedValue.next = {
-          x: nx,
-          y: ny,
-          r: nextR,
-          angle: nextAngle,
-          value: nextValue
-        };
-      }
-      return retrunedValue;
+      return returnedValue;
     })
   };
 }

package/RadarChart/RadarChart.d.ts

@@ -5,13 +5,14 @@ import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { ChartsWrapperProps } from "../internals/components/ChartsWrapper/index.js";
 import { RadarGridProps } from "./RadarGrid/index.js";
 import { RadarDataProviderProps } from "./RadarDataProvider/RadarDataProvider.js";
+import { RadarSeriesPlotProps } from "./RadarSeriesPlot/index.js";
 import { RadarAxisHighlightProps } from "./RadarAxisHighlight/index.js";
 import { ChartsTooltipSlotProps, ChartsTooltipSlots } from "../ChartsTooltip/index.js";
 import { ChartsSlotProps, ChartsSlots } from "../internals/material/index.js";
 import { ChartsToolbarSlotProps, ChartsToolbarSlots } from "../Toolbar/index.js";
 export interface RadarChartSlots extends ChartsTooltipSlots, ChartsOverlaySlots, ChartsLegendSlots, ChartsToolbarSlots, Partial<ChartsSlots> {}
 export interface RadarChartSlotProps extends ChartsTooltipSlotProps, ChartsOverlaySlotProps, ChartsLegendSlotProps, ChartsToolbarSlotProps, Partial<ChartsSlotProps> {}
-export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ChartsWrapperProps, 'sx'>, Omit<ChartsSurfaceProps, 'sx'> {
+export interface RadarChartProps extends RadarDataProviderProps, Omit<RadarGridProps, 'classes'>, Omit<Partial<RadarAxisHighlightProps>, 'classes'>, Omit<ChartsOverlayProps, 'slots' | 'slotProps'>, Pick<ChartsWrapperProps, 'sx'>, Omit<ChartsSurfaceProps, 'sx'>, Pick<RadarSeriesPlotProps, 'onAreaClick' | 'onMarkClick'> {
   /**
    * If `true`, the legend is not rendered.
    */