@mui/x-charts 8.22.1 → 8.24.0

package/LineChart/CircleMarkElement.js

@@ -16,8 +16,11 @@ var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
-const Circle = (0, _styles.styled)('circle')({
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
+const Circle = (0, _styles.styled)('circle', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'cx, cy, opacity',
@@ -49,6 +52,10 @@ function CircleMarkElement(props) {
       skipAnimation,
       isFaded = false,
       isHighlighted = false
+      // @ts-expect-error, prevents it from being passed to the svg element
+      ,
+
+      hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
@@ -62,7 +69,6 @@ function CircleMarkElement(props) {
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
     skipAnimation
   };
   const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
@@ -75,10 +81,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/LineChart/FocusedLineMark.js

@@ -22,10 +22,14 @@ function FocusedLineMark() {
     yAxis,
     yAxisIds
   } = (0, _hooks.useYAxes)();
-  if (focusedItem === null || focusedItem.seriesType !== 'line' || !lineSeries) {
+  if (focusedItem === null || focusedItem.type !== 'line' || !lineSeries) {
+    return null;
+  }
+  const series = lineSeries.series[focusedItem.seriesId];
+  if (series.data[focusedItem.dataIndex] == null) {
+    // Handle missing data
     return null;
   }
-  const series = lineSeries?.series[focusedItem.seriesId];
   const xAxisId = series.xAxisId ?? xAxisIds[0];
   const yAxisId = series.yAxisId ?? yAxisIds[0];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {

package/LineChart/LineChart.js

@@ -145,6 +145,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.default.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.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['line']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -202,6 +227,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.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

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

@@ -11,4 +11,5 @@ var _useChartInteraction = require("../internals/plugins/featurePlugins/useChart
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
 var _useChartBrush = require("../internals/plugins/featurePlugins/useChartBrush");
-const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const LINE_CHART_PLUGINS = exports.LINE_CHART_PLUGINS = [_useChartZAxis.useChartZAxis, _useChartBrush.useChartBrush, _useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartCartesianAxis.useChartCartesianAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartKeyboardNavigation.useChartKeyboardNavigation];

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

@@ -21,7 +21,7 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _AnimatedLine = require("./AnimatedLine");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
+const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick", "hidden"];
 function getLineElementUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiLineElement', slot);
 }
@@ -56,7 +56,8 @@ function LineElement(props) {
       gradientId,
       slots,
       slotProps,
-      onClick
+      onClick,
+      hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -75,7 +76,8 @@ function LineElement(props) {
     color,
     gradientId,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    hidden
   };
   const classes = useUtilityClasses(ownerState);
   const Line = slots?.line ?? _AnimatedLine.AnimatedLine;
@@ -100,6 +102,8 @@ process.env.NODE_ENV !== "production" ? LineElement.propTypes = {
   color: _propTypes.default.string.isRequired,
   d: _propTypes.default.string.isRequired,
   gradientId: _propTypes.default.string,
+  /** If `true`, the line is hidden. */
+  hidden: _propTypes.default.bool,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, animations are skipped.

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

@@ -18,17 +18,14 @@ var _getSymbol = require("../internals/getSymbol");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const MarkElementPath = (0, _styles.styled)('path', {
   name: 'MuiMarkElement',
   slot: 'Root'
 })(({
-  ownerState,
   theme
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
-  stroke: ownerState.color,
-  strokeWidth: 2,
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'transform, transform-origin, opacity',
@@ -57,7 +54,9 @@ function MarkElement(props) {
       onClick,
       skipAnimation,
       isFaded = false,
-      isHighlighted = false
+      isHighlighted = false,
+      hidden,
+      style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const interactionProps = (0, _useInteractionItemProps.useInteractionItemProps)({
@@ -70,23 +69,26 @@ function MarkElement(props) {
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
     skipAnimation
   };
   const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarkElementPath, (0, _extends2.default)({}, other, {
-    style: {
+    style: (0, _extends2.default)({}, style, {
       transform: `translate(${x}px, ${y}px)`,
       transformOrigin: `${x}px ${y}px`
-    },
+    }),
     ownerState: ownerState,
     className: classes.root,
     d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.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 = {
@@ -99,6 +101,11 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
    * The index to the element in the series' data array.
    */
   dataIndex: _propTypes.default.number.isRequired,
+  /**
+   * If `true`, the marker is hidden.
+   * @default false
+   */
+  hidden: _propTypes.default.bool,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   /**
    * If `true`, the marker is faded.

package/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/LineChart/seriesConfig/index.js

@@ -13,6 +13,8 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
+var _identifierSerializer = require("../../internals/identifierSerializer");
 const lineSeriesConfig = exports.lineSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -22,5 +24,7 @@ const lineSeriesConfig = exports.lineSeriesConfig = {
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

package/LineChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'line', 'bar' | 'line' | 'scatter'>;
+export default keyboardFocusHandler;

package/LineChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowLeft':
+      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowDown':
+      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+    case 'ArrowUp':
+      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+var _default = exports.default = keyboardFocusHandler;

package/LineChart/seriesConfig/legend.js

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

package/LineChart/seriesConfig/seriesProcessor.js

@@ -8,13 +8,13 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _warning = require("@mui/x-internals/warning");
-var _stackSeries = require("../../internals/stackSeries");
+var _stacking = require("../../internals/stacking");
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,
     series
   } = params;
-  const stackingGroups = (0, _stackSeries.getStackingGroups)((0, _extends2.default)({}, params, {
+  const stackingGroups = (0, _stacking.getStackingGroups)((0, _extends2.default)({}, params, {
     defaultStrategy: {
       stackOffset: 'none'
     }

package/PieChart/FocusedPieArc.js

@@ -1,13 +1,14 @@
 "use strict";
 'use client';
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FocusedPieArc = FocusedPieArc;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _useFocusedItem = require("../hooks/useFocusedItem");
@@ -16,6 +17,7 @@ var _PieArc = require("./PieArc");
 var _useItemHighlighted = require("../hooks/useItemHighlighted");
 var _getModifiedArcProperties = require("./dataTransform/getModifiedArcProperties");
 var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["arcLabelRadius"];
 function FocusedPieArc(props) {
   const theme = (0, _styles.useTheme)();
   const focusedItem = (0, _useFocusedItem.useFocusedItem)();
@@ -25,7 +27,7 @@ function FocusedPieArc(props) {
     isFaded
   } = (0, _useItemHighlighted.useItemHighlighted)(focusedItem);
   const pieSeries = (0, _usePieSeries.usePieSeriesContext)();
-  if (focusedItem === null || focusedItem.seriesType !== 'pie' || !pieSeries) {
+  if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
     return null;
   }
   const series = pieSeries?.series[focusedItem.seriesId];
@@ -37,7 +39,8 @@ function FocusedPieArc(props) {
     return null;
   }
   const item = series.data[focusedItem.dataIndex];
-  const arcSizes = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded);
+  const _getModifiedArcProper = (0, _getModifiedArcProperties.getModifiedArcProperties)(series, pieSeriesLayout[focusedItem.seriesId], isHighlighted, isFaded),
+    arcSizes = (0, _objectWithoutPropertiesLoose2.default)(_getModifiedArcProper, _excluded);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArc.PieArc, (0, _extends2.default)({
     transform: `translate(${pieSeriesLayout[series.id].center.x}, ${pieSeriesLayout[series.id].center.y})`,
     startAngle: item.startAngle,

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

@@ -20,7 +20,7 @@ var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generat
 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", "skipAnimation"];
+const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "skipAnimation", "hidden"];
 function getPieArcLabelUtilityClass(slot) {
   return (0, _generateUtilityClass.default)('MuiPieArcLabel', slot);
 }
@@ -76,7 +76,8 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
       formattedArcLabel,
       isHighlighted,
       isFaded,
-      skipAnimation
+      skipAnimation,
+      hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const ownerState = {
@@ -101,6 +102,7 @@ const PieArcLabel = exports.PieArcLabel = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(PieArcLabelRoot, (0, _extends2.default)({
     className: classes.root
   }, other, animatedProps, {
+    opacity: hidden ? 0 : 1,
     children: formattedArcLabel
   }));
 });
@@ -116,6 +118,7 @@ process.env.NODE_ENV !== "production" ? PieArcLabel.propTypes = {
   cornerRadius: _propTypes.default.number.isRequired,
   endAngle: _propTypes.default.number.isRequired,
   formattedArcLabel: _propTypes.default.string,
+  hidden: _propTypes.default.bool,
   id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
   innerRadius: _propTypes.default.number.isRequired,
   isFaded: _propTypes.default.bool.isRequired,

package/PieChart/PieChart.js

@@ -80,15 +80,15 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     plugins: _PieChart2.PIE_CHART_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  const Toolbar = props.slots?.toolbar;
+  const Toolbar = slots?.toolbar;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.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__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, props.slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
-        direction: props.slotProps?.legend?.direction ?? 'vertical',
+      children: [showToolbar && Toolbar ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, (0, _extends2.default)({}, slotProps?.toolbar)) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
+        direction: slotProps?.legend?.direction ?? 'vertical',
         slots: slots,
         slotProps: slotProps
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
@@ -133,6 +133,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.default.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.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['pie']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -171,6 +196,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     right: _propTypes.default.number,
     top: _propTypes.default.number
   })]),
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

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

@@ -8,4 +8,5 @@ var _useChartInteraction = require("../internals/plugins/featurePlugins/useChart
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
 var _useChartKeyboardNavigation = require("../internals/plugins/featurePlugins/useChartKeyboardNavigation");
-const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartKeyboardNavigation.useChartKeyboardNavigation];
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const PIE_CHART_PLUGINS = exports.PIE_CHART_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager, _useChartKeyboardNavigation.useChartKeyboardNavigation];

package/PieChart/dataTransform/useTransformData.js

@@ -32,7 +32,7 @@ function useTransformData(series) {
     const isHighlighted = isItemHighlighted(currentItem);
     const isFaded = !isHighlighted && isItemFaded(currentItem);
     const isFocused = isItemFocused({
-      seriesType: 'pie',
+      type: 'pie',
       seriesId,
       dataIndex: itemIndex
     });

package/PieChart/seriesConfig/index.js

@@ -12,6 +12,8 @@ var _tooltip = _interopRequireDefault(require("./tooltip"));
 var _seriesLayout = _interopRequireDefault(require("./seriesLayout"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
+var _identifierSerializer = require("../../internals/identifierSerializer");
 const pieSeriesConfig = exports.pieSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -19,5 +21,7 @@ const pieSeriesConfig = exports.pieSeriesConfig = {
   legendGetter: _legend.default,
   tooltipGetter: _tooltip.default,
   tooltipItemPositionGetter: _tooltipPosition.default,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

package/PieChart/seriesConfig/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'pie', 'pie'>;
+export default keyboardFocusHandler;

package/PieChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _commonNextFocusItem = require("../../internals/commonNextFocusItem");
+const outSeriesTypes = new Set(['pie']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return (0, _commonNextFocusItem.createGetNextIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowLeft':
+      return (0, _commonNextFocusItem.createGetPreviousIndexFocusedItem)(outSeriesTypes);
+    case 'ArrowDown':
+      return (0, _commonNextFocusItem.createGetPreviousSeriesFocusedItem)(outSeriesTypes);
+    case 'ArrowUp':
+      return (0, _commonNextFocusItem.createGetNextSeriesFocusedItem)(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+var _default = exports.default = keyboardFocusHandler;

package/PieChart/seriesConfig/legend.js

@@ -16,13 +16,16 @@ const legendGetter = params => {
       if (formattedLabel === undefined) {
         return;
       }
+      const id = item.id ?? dataIndex;
       acc.push({
+        type: 'pie',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
-        id: item.id ?? dataIndex,
         seriesId,
+        id,
+        itemId: id,
+        dataIndex,
         color: item.color,
-        label: formattedLabel,
-        itemId: item.id ?? dataIndex
+        label: formattedLabel
       });
     });
     return acc;