@mui/x-charts 8.22.1 → 8.24.0

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

@@ -17,10 +17,14 @@ export function FocusedLineMark() {
     yAxis,
     yAxisIds
   } = 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__*/_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

@@ -5,6 +5,8 @@ import legendGetter from "./legend.js";
 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,
@@ -14,5 +16,7 @@ export const lineSeriesConfig = {
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

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

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../internals/stackSeries.js";
+import { getStackingGroups } from "../../internals/stacking/index.js";
 const seriesProcessor = (params, dataset) => {
   const {
     seriesOrder,

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";
@@ -18,7 +20,7 @@ export function FocusedPieArc(props) {
     isFaded
   } = useItemHighlighted(focusedItem);
   const pieSeries = usePieSeriesContext();
-  if (focusedItem === null || focusedItem.seriesType !== 'pie' || !pieSeries) {
+  if (focusedItem === null || focusedItem.type !== 'pie' || !pieSeries) {
     return null;
   }
   const series = pieSeries?.series[focusedItem.seriesId];
@@ -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/dataTransform/useTransformData.js

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

package/esm/PieChart/seriesConfig/index.js

@@ -5,6 +5,8 @@ import tooltipGetter from "./tooltip.js";
 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,
@@ -12,5 +14,7 @@ export const pieSeriesConfig = {
   legendGetter,
   tooltipGetter,
   tooltipItemPositionGetter,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/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/esm/PieChart/seriesConfig/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['pie']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/PieChart/seriesConfig/legend.js

@@ -10,13 +10,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;

package/esm/RadarChart/RadarChart.js

@@ -84,6 +84,31 @@ process.env.NODE_ENV !== "production" ? RadarChart.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(['radar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -140,6 +165,11 @@ process.env.NODE_ENV !== "production" ? RadarChart.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/RadarChart/RadarChart.plugins.d.ts

@@ -2,5 +2,6 @@ import { type UseChartPolarAxisSignature } from "../internals/plugins/featurePlu
 import { type UseChartTooltipSignature } from "../internals/plugins/featurePlugins/useChartTooltip/index.js";
 import { type UseChartInteractionSignature } from "../internals/plugins/featurePlugins/useChartInteraction/index.js";
 import { type UseChartHighlightSignature } from "../internals/plugins/featurePlugins/useChartHighlight/index.js";
-export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>];
-export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export declare const RADAR_PLUGINS: readonly [import("../internals/index.js").ChartPlugin<UseChartTooltipSignature>, import("../internals/index.js").ChartPlugin<UseChartInteractionSignature>, import("../internals/index.js").ChartPlugin<UseChartPolarAxisSignature<any>>, import("../internals/index.js").ChartPlugin<UseChartHighlightSignature>, import("../internals/index.js").ChartPlugin<UseChartVisibilityManagerSignature<any>>];
+export type RadarChartPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartPolarAxisSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'radar'>];