@mui/x-charts 8.23.0 → 8.24.0

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

@@ -14,6 +14,7 @@ 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,
@@ -24,5 +25,6 @@ const lineSeriesConfig = exports.lineSeriesConfig = {
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
-  keyboardFocusHandler: _keyboardFocusHandler.default
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

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/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)();
@@ -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/seriesConfig/index.js

@@ -13,6 +13,7 @@ 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,
@@ -21,5 +22,6 @@ const pieSeriesConfig = exports.pieSeriesConfig = {
   tooltipGetter: _tooltip.default,
   tooltipItemPositionGetter: _tooltipPosition.default,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
-  keyboardFocusHandler: _keyboardFocusHandler.default
+  keyboardFocusHandler: _keyboardFocusHandler.default,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

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;

package/RadarChart/RadarChart.js

@@ -91,6 +91,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.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(['radar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -147,6 +172,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.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/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'>];

package/RadarChart/RadarChart.plugins.js

@@ -8,4 +8,5 @@ var _useChartPolarAxis = require("../internals/plugins/featurePlugins/useChartPo
 var _useChartTooltip = require("../internals/plugins/featurePlugins/useChartTooltip");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
-const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartPolarAxis.useChartPolarAxis, _useChartHighlight.useChartHighlight];
+var _useChartVisibilityManager = require("../internals/plugins/featurePlugins/useChartVisibilityManager");
+const RADAR_PLUGINS = exports.RADAR_PLUGINS = [_useChartTooltip.useChartTooltip, _useChartInteraction.useChartInteraction, _useChartPolarAxis.useChartPolarAxis, _useChartHighlight.useChartHighlight, _useChartVisibilityManager.useChartVisibilityManager];

package/RadarChart/seriesConfig/index.js

@@ -13,6 +13,7 @@ var _legend = _interopRequireDefault(require("./legend"));
 var _tooltip = _interopRequireWildcard(require("./tooltip"));
 var _getSeriesWithDefaultValues = _interopRequireDefault(require("./getSeriesWithDefaultValues"));
 var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
+var _identifierSerializer = require("../../internals/identifierSerializer");
 const radarSeriesConfig = exports.radarSeriesConfig = {
   colorProcessor: _getColor.default,
   seriesProcessor: _seriesProcessor.default,
@@ -22,5 +23,6 @@ const radarSeriesConfig = exports.radarSeriesConfig = {
   axisTooltipGetter: _tooltip.axisTooltipGetter,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
   radiusExtremumGetter: _extremums.radiusExtremumGetter,
-  rotationExtremumGetter: _extremums.rotationExtremumGetter
+  rotationExtremumGetter: _extremums.rotationExtremumGetter,
+  identifierSerializer: _identifierSerializer.identifierSerializerSeriesIdDataIndex
 };

package/RadarChart/seriesConfig/legend.js

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

package/ScatterChart/BatchScatter.js

@@ -12,21 +12,12 @@ var _scatterClasses = require("./scatterClasses");
 var _ChartProvider = require("../context/ChartProvider");
 var _useScale = require("../hooks/useScale");
 var _useChartHighlight = require("../internals/plugins/featurePlugins/useChartHighlight");
+var _appendAtKey = require("../internals/appendAtKey");
 var _jsxRuntime = require("react/jsx-runtime");
 const MAX_POINTS_PER_PATH = 1000;
 /* In an SVG arc, if the arc starts and ends at the same point, it is not rendered, so we add a tiny
  * value to one of the coordinates to ensure that the arc is rendered. */
 const ALMOST_ZERO = 0.01;
-function appendAtKey(map, key, value) {
-  let bucket = map.get(key);
-  if (!bucket) {
-    bucket = [value];
-    map.set(key, bucket);
-  } else {
-    bucket.push(value);
-  }
-  return bucket;
-}
 function createPath(x, y, markerSize) {
   return `M${x - markerSize} ${y} a${markerSize} ${markerSize} 0 1 1 0 ${ALMOST_ZERO}`;
 }
@@ -47,15 +38,15 @@ function useCreatePaths(seriesData, markerSize, xScale, yScale, color, colorGett
     }
     const path = createPath(x, y, markerSize);
     const fill = colorGetter ? colorGetter(i) : color;
-    const tempPath = appendAtKey(temporaryPaths, fill, path);
+    const tempPath = (0, _appendAtKey.appendAtKey)(temporaryPaths, fill, path);
     if (tempPath.length >= MAX_POINTS_PER_PATH) {
-      appendAtKey(paths, fill, tempPath.join(''));
+      (0, _appendAtKey.appendAtKey)(paths, fill, tempPath.join(''));
       temporaryPaths.delete(fill);
     }
   }
   for (const [fill, tempPath] of temporaryPaths.entries()) {
     if (tempPath.length > 0) {
-      appendAtKey(paths, fill, tempPath.join(''));
+      (0, _appendAtKey.appendAtKey)(paths, fill, tempPath.join(''));
     }
   }
   return paths;
@@ -87,7 +78,10 @@ function BatchScatterPaths(props) {
 }
 const MemoBatchScatterPaths = /*#__PURE__*/React.memo(BatchScatterPaths);
 if (process.env.NODE_ENV !== "production") MemoBatchScatterPaths.displayName = "MemoBatchScatterPaths";
-const Group = (0, _styles.styled)('g')({
+const Group = (0, _styles.styled)('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   '&[data-faded="true"]': {
     opacity: 0.3
   },

package/ScatterChart/ScatterChart.js

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

@@ -7,5 +7,6 @@ import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/h
 import { type UseChartClosestPointSignature } from "../internals/plugins/featurePlugins/useChartClosestPoint/index.js";
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type ScatterChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'scatter'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'scatter'>, UseChartClosestPointSignature, UseChartKeyboardNavigationSignature];
 export declare const SCATTER_CHART_PLUGINS: ConvertSignaturesIntoPlugins<ScatterChartPluginSignatures>;

package/ScatterChart/ScatterChart.plugins.js

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

package/ScatterChart/seriesConfig/index.js

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

package/ScatterChart/seriesConfig/legend.js

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

package/SparkLineChart/SparkLineChart.js

@@ -248,6 +248,47 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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.oneOfType([_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['bar']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['line']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['scatter']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['pie']).isRequired
+  }), _propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['radar']).isRequired
+  })]).isRequired),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -293,6 +334,11 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.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.
    *