@mui/x-charts 8.23.0 → 8.24.0

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["trigger", "position", "anchor", "classes", "children"];
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
@@ -21,7 +22,7 @@ import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/
 import { useAxisSystem } from "../hooks/useAxisSystem.js";
 import { useSvgRef } from "../hooks/index.js";
 import { selectorBrushShouldPreventTooltip } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectorReturnFalse = () => false;
 const selectorReturnNull = () => null;
 function getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush) {
@@ -72,6 +73,7 @@ function ChartsTooltipContainer(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgRef = useSvgRef();
+  const anchorRef = React.useRef(null);
   const classes = useUtilityClasses(propClasses);
   const pointerType = usePointerType();
   const isFineMainPointer = useIsFineMainPointer();
@@ -93,18 +95,11 @@ function ChartsTooltipContainer(inProps) {
       return () => {};
     }
     if (itemPosition !== null) {
-      const positionUpdate = rafThrottle(() => {
-        // eslint-disable-next-line react-compiler/react-compiler
-        positionRef.current = {
-          x: svgElement.getBoundingClientRect().left + (itemPosition?.x ?? 0),
-          y: svgElement.getBoundingClientRect().top + (itemPosition?.y ?? 0)
-        };
-        popperRef.current?.update();
-      });
-      positionUpdate();
-      return () => positionUpdate.clear();
+      // Tooltip position is already handled by the anchor element
+      return undefined;
     }
     const pointerUpdate = rafThrottle((x, y) => {
+      // eslint-disable-next-line react-compiler/react-compiler
       positionRef.current = {
         x,
         y
@@ -124,7 +119,7 @@ function ChartsTooltipContainer(inProps) {
       pointerUpdate.clear();
     };
   }, [svgRef, positionRef, itemPosition]);
-  const anchorEl = React.useMemo(() => ({
+  const pointerAnchorEl = React.useMemo(() => ({
     getBoundingClientRect: () => ({
       x: positionRef.current.x,
       y: positionRef.current.y,
@@ -166,16 +161,25 @@ function ChartsTooltipContainer(inProps) {
   if (trigger === 'none') {
     return null;
   }
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: isOpen && /*#__PURE__*/_jsx(ChartsTooltipRoot, _extends({}, other, {
-      className: classes?.root,
-      open: isOpen,
-      placement: other.placement ?? position ?? (isMouse ? 'right-start' : 'top'),
-      popperRef: popperRef,
-      anchorEl: anchorEl,
-      modifiers: modifiers,
-      children: children
-    }))
+  if (itemPosition !== null && anchorRef.current) {
+    anchorRef.current.setAttribute('x', String(itemPosition.x));
+    anchorRef.current.setAttribute('y', String(itemPosition.y));
+  }
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [svgRef.current && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx("rect", {
+      ref: anchorRef,
+      display: "hidden"
+    }), svgRef.current), /*#__PURE__*/_jsx(NoSsr, {
+      children: isOpen && /*#__PURE__*/_jsx(ChartsTooltipRoot, _extends({}, other, {
+        className: classes?.root,
+        open: isOpen,
+        placement: other.placement ?? position ?? (pointerType !== null && isMouse ? 'right-start' : 'top'),
+        popperRef: popperRef,
+        anchorEl: itemPosition ? anchorRef.current : pointerAnchorEl,
+        modifiers: modifiers,
+        children: children
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {

package/esm/Gauge/GaugeContainer.js

@@ -11,7 +11,10 @@ import { GaugeProvider } from "./GaugeProvider.js";
 import { ChartProvider } from "../context/ChartProvider/index.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GStyled = styled('g')(({
+const GStyled = styled('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   '& text': {

package/esm/LineChart/AnimatedLine.js

@@ -24,9 +24,12 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const animateProps = useAnimateLine(_extends({}, props, {
+  const animateProps = useAnimateLine({
+    d: props.d,
+    skipAnimation,
     ref
-  }));
+  });
+  const fadedOpacity = ownerState.isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
@@ -36,7 +39,7 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
       strokeLinejoin: "round",
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-      opacity: ownerState.isFaded ? 0.3 : 1,
+      opacity: ownerState.hidden ? 0 : fadedOpacity,
       "data-series": ownerState.id,
       "data-highlighted": ownerState.isHighlighted || undefined,
       "data-faded": ownerState.isFaded || undefined
@@ -54,6 +57,7 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
     classes: PropTypes.object,
     color: PropTypes.string.isRequired,
     gradientId: PropTypes.string,
+    hidden: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     isFaded: PropTypes.bool.isRequired,
     isHighlighted: PropTypes.bool.isRequired

package/esm/LineChart/AppearingMask.js

@@ -8,7 +8,10 @@ import { cleanId } from "../internals/cleanId.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const appearingMaskClasses = generateUtilityClasses('MuiAppearingMask', ['animate']);
-const AnimatedRect = styled('rect')({
+const AnimatedRect = styled('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   animationName: 'animate-width',
   animationTimingFunction: ANIMATION_TIMING_FUNCTION,
   animationDuration: '0s',

package/esm/LineChart/CircleMarkElement.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { type MarkElementOwnerState } from "./markElementClasses.js";
 export type CircleMarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
   /**
    * If `true`, animations are skipped.
    * @default false

package/esm/LineChart/CircleMarkElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled, useTheme } from '@mui/material/styles';
@@ -10,7 +10,10 @@ import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/a
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const Circle = styled('circle')({
+const Circle = styled('circle', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   [`&.${markElementClasses.animate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'cx, cy, opacity',
@@ -42,6 +45,10 @@ function CircleMarkElement(props) {
       skipAnimation,
       isFaded = false,
       isHighlighted = false
+      // @ts-expect-error, prevents it from being passed to the svg element
+      ,
+
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
@@ -55,7 +62,6 @@ function CircleMarkElement(props) {
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
     skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
@@ -68,10 +74,12 @@ function CircleMarkElement(props) {
     strokeWidth: 2,
     className: classes.root,
     onClick: onClick,
-    cursor: onClick ? 'pointer' : 'unset'
+    cursor: onClick ? 'pointer' : 'unset',
+    pointerEvents: hidden ? 'none' : undefined
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
-    "data-faded": isFaded || undefined
+    "data-faded": isFaded || undefined,
+    opacity: hidden ? 0 : 1
   }));
 }
 process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {

package/esm/LineChart/FocusedLineMark.js

@@ -20,7 +20,11 @@ export function FocusedLineMark() {
   if (focusedItem === null || focusedItem.type !== 'line' || !lineSeries) {
     return null;
   }
-  const series = lineSeries?.series[focusedItem.seriesId];
+  const series = lineSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
+    return null;
+  }
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   return /*#__PURE__*/_jsx("rect", {

package/esm/LineChart/LineChart.js

@@ -138,6 +138,31 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['line']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -195,6 +220,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: PropTypes.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/LineChart/LineChart.plugins.d.ts

@@ -6,5 +6,6 @@ import { type UseChartHighlightSignature } from "../internals/plugins/featurePlu
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'line'>, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/esm/LineChart/LineChart.plugins.js

@@ -5,4 +5,5 @@ import { useChartInteraction } from "../internals/plugins/featurePlugins/useChar
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { useChartBrush } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartKeyboardNavigation];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const LINE_CHART_PLUGINS = [useChartZAxis, useChartBrush, useChartTooltip, useChartInteraction, useChartCartesianAxis, useChartHighlight, useChartVisibilityManager, useChartKeyboardNavigation];

package/esm/LineChart/LineElement.d.ts

@@ -23,6 +23,8 @@ export interface LineElementOwnerState {
   isFaded: boolean;
   isHighlighted: boolean;
   classes?: Partial<LineElementClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
 }
 export declare function getLineElementUtilityClass(slot: string): string;
 export declare const lineElementClasses: LineElementClasses;
@@ -38,6 +40,8 @@ export interface LineElementSlotProps {
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
   /**
    * The props used for each component slot.
    * @default {}

package/esm/LineChart/LineElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -47,7 +47,8 @@ function LineElement(props) {
       gradientId,
       slots,
       slotProps,
-      onClick
+      onClick,
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -66,7 +67,8 @@ function LineElement(props) {
     color,
     gradientId,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    hidden
   };
   const classes = useUtilityClasses(ownerState);
   const Line = slots?.line ?? AnimatedLine;
@@ -91,6 +93,8 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   color: PropTypes.string.isRequired,
   d: PropTypes.string.isRequired,
   gradientId: PropTypes.string,
+  /** If `true`, the line is hidden. */
+  hidden: PropTypes.bool,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If `true`, animations are skipped.

package/esm/LineChart/MarkElement.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { type MarkElementOwnerState } from "./markElementClasses.js";
 export type MarkElementProps = Omit<MarkElementOwnerState, 'isFaded' | 'isHighlighted'> & Omit<React.SVGProps<SVGPathElement>, 'ref' | 'id'> & {
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden?: boolean;
   /**
    * If `true`, animations are skipped.
    * @default false

package/esm/LineChart/MarkElement.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
+const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "hidden", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
@@ -16,12 +16,9 @@ const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
   slot: 'Root'
 })(({
-  ownerState,
   theme
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  stroke: ownerState.color,
-  strokeWidth: 2,
   [`&.${markElementClasses.animate}`]: {
     transitionDuration: `${ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'transform, transform-origin, opacity',
@@ -50,7 +47,9 @@ function MarkElement(props) {
       onClick,
       skipAnimation,
       isFaded = false,
-      isHighlighted = false
+      isHighlighted = false,
+      hidden,
+      style
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const interactionProps = useInteractionItemProps({
@@ -63,23 +62,26 @@ function MarkElement(props) {
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
     skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
-    style: {
+    style: _extends({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
-    },
+    }),
     ownerState: ownerState,
     className: classes.root,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
-    cursor: onClick ? 'pointer' : 'unset'
+    cursor: onClick ? 'pointer' : 'unset',
+    pointerEvents: hidden ? 'none' : undefined
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
-    "data-faded": isFaded || undefined
+    "data-faded": isFaded || undefined,
+    opacity: hidden ? 0 : 1,
+    strokeWidth: 2,
+    stroke: color
   }));
 }
 process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
@@ -92,6 +94,11 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    * The index to the element in the series' data array.
    */
   dataIndex: PropTypes.number.isRequired,
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden: PropTypes.bool,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   /**
    * If `true`, the marker is faded.

package/esm/LineChart/markElementClasses.d.ts

@@ -17,7 +17,6 @@ export interface MarkElementClasses {
 export type MarkElementClassKey = keyof MarkElementClasses;
 export interface MarkElementOwnerState {
   id: SeriesId;
-  color: string;
   isFaded: boolean;
   isHighlighted: boolean;
   classes?: Partial<MarkElementClasses>;

package/esm/LineChart/seriesConfig/index.js

@@ -6,6 +6,7 @@ import tooltipGetter, { axisTooltipGetter } from "./tooltip.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const lineSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -16,5 +17,6 @@ export const lineSeriesConfig = {
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
   getSeriesWithDefaultValues,
-  keyboardFocusHandler
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/LineChart/seriesConfig/legend.js

@@ -10,6 +10,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      type: 'line',
       markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,

package/esm/PieChart/FocusedPieArc.js

@@ -1,6 +1,8 @@
 'use client';
 
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["arcLabelRadius"];
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useFocusedItem } from "../hooks/useFocusedItem.js";
@@ -30,7 +32,8 @@ export function FocusedPieArc(props) {
     return null;
   }
   const item = series.data[focusedItem.dataIndex];
-  const arcSizes = getModifiedArcProperties(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded);
+  const _getModifiedArcProper = getModifiedArcProperties(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded),
+    arcSizes = _objectWithoutPropertiesLoose(_getModifiedArcProper, _excluded);
   return /*#__PURE__*/_jsx(PieArc, _extends({
     transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
     startAngle: item.startAngle,

package/esm/PieChart/PieArcLabel.d.ts

@@ -36,6 +36,7 @@ export type PieArcLabelProps = PieArcLabelOwnerState & Omit<React.SVGProps<SVGTe
   paddingAngle: number;
   skipAnimation: boolean;
   formattedArcLabel?: string | null;
+  hidden?: boolean;
 };
 declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState & Omit<React.SVGProps<SVGTextElement>, "ref" | "color" | "id"> & {
   startAngle: number;
@@ -47,5 +48,6 @@ declare const PieArcLabel: React.ForwardRefExoticComponent<PieArcLabelOwnerState
   paddingAngle: number;
   skipAnimation: boolean;
   formattedArcLabel?: string | null;
+  hidden?: boolean;
 } & React.RefAttributes<SVGTextElement>>;
 export { PieArcLabel };

package/esm/PieChart/PieArcLabel.js

@@ -2,7 +2,7 @@
 
 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", "skipAnimation"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
@@ -67,7 +67,8 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      skipAnimation
+      skipAnimation,
+      hidden
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = {
@@ -92,6 +93,7 @@ const PieArcLabel = /*#__PURE__*/React.forwardRef(function PieArcLabel(props, re
   return /*#__PURE__*/_jsx(PieArcLabelRoot, _extends({
     className: classes.root
   }, other, animatedProps, {
+    opacity: hidden ? 0 : 1,
     children: formattedArcLabel
   }));
 });
@@ -107,6 +109,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   cornerRadius: PropTypes.number.isRequired,
   endAngle: PropTypes.number.isRequired,
   formattedArcLabel: PropTypes.string,
+  hidden: PropTypes.bool,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   innerRadius: PropTypes.number.isRequired,
   isFaded: PropTypes.bool.isRequired,

package/esm/PieChart/PieChart.js

@@ -73,15 +73,15 @@ const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(inProps, ref) {
     plugins: PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? ChartsTooltip;
-  const Toolbar = props.slots?.toolbar;
+  const Toolbar = slots?.toolbar;
   return /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps, {
     children: /*#__PURE__*/_jsxs(ChartsWrapper, {
-      legendPosition: props.slotProps?.legend?.position,
-      legendDirection: props.slotProps?.legend?.direction ?? 'vertical',
+      legendPosition: slotProps?.legend?.position,
+      legendDirection: slotProps?.legend?.direction ?? 'vertical',
       sx: sx,
       hideLegend: hideLegend ?? false,
-      children: [showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
-        direction: props.slotProps?.legend?.direction ?? 'vertical',
+      children: [showToolbar && Toolbar ? /*#__PURE__*/_jsx(Toolbar, _extends({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/_jsx(ChartsLegend, {
+        direction: slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps
       }), /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
@@ -126,6 +126,31 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: PropTypes.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: PropTypes.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.number,
+    seriesId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.oneOf(['pie']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -164,6 +189,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: PropTypes.number,
     top: PropTypes.number
   })]),
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/PieChart/PieChart.plugins.d.ts

@@ -3,5 +3,6 @@ import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugi
 import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
-export type PieChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type PieChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'pie'>, UseChartKeyboardNavigationSignature];
 export declare const PIE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<PieChartPluginSignatures>;

package/esm/PieChart/PieChart.plugins.js

@@ -2,4 +2,5 @@ import { useChartInteraction } from "../internals/plugins/featurePlugins/useChar
 import { useChartTooltip } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { useChartHighlight } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
 import { useChartKeyboardNavigation } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
-export const PIE_CHART_PLUGINS = [useChartTooltip, useChartInteraction, useChartHighlight, useChartKeyboardNavigation];
+import { useChartVisibilityManager } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export const PIE_CHART_PLUGINS = [useChartTooltip, useChartInteraction, useChartHighlight, useChartVisibilityManager, useChartKeyboardNavigation];

package/esm/PieChart/seriesConfig/index.js

@@ -6,6 +6,7 @@ import seriesLayout from "./seriesLayout.js";
 import getSeriesWithDefaultValues from "./getSeriesWithDefaultValues.js";
 import tooltipItemPositionGetter from "./tooltipPosition.js";
 import keyboardFocusHandler from "./keyboardFocusHandler.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const pieSeriesConfig = {
   colorProcessor: getColor,
   seriesProcessor,
@@ -14,5 +15,6 @@ export const pieSeriesConfig = {
   tooltipGetter,
   tooltipItemPositionGetter,
   getSeriesWithDefaultValues,
-  keyboardFocusHandler
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };