@mui/x-charts-pro 8.23.0 → 8.24.0

package/BarChartPro/BarChartPro.js

@@ -165,6 +165,31 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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(['bar']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -232,6 +257,11 @@ process.env.NODE_ENV !== "production" ? BarChartPro.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.
    *
@@ -258,6 +288,15 @@ process.env.NODE_ENV !== "production" ? BarChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: _propTypes.default.func,
+  /**
+   * The type of renderer to use for the bar plot.
+   * - `svg-single`: Renders every bar in a `<rect />` element.
+   * - `svg-batch`: Batch renders bars in `<path />` elements for better performance with large datasets, at the cost of some limitations.
+   *                Read more: https://mui.com/x/react-charts/bars/#performance
+   *
+   * @default 'svg-single'
+   */
+  renderer: _propTypes.default.oneOf(['svg-batch', 'svg-single']),
   /**
    * The series to display in the bar chart.
    * An array of [[BarSeries]] objects.

package/BarChartPro/BarChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type ConvertSignaturesIntoPlugins, type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type BarChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'bar'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'bar'>, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const BAR_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<BarChartProPluginSignatures>;

package/BarChartPro/BarChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.BAR_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const BAR_CHART_PRO_PLUGINS = exports.BAR_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartVisibilityManager, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/CHANGELOG.md

@@ -5,9 +5,119 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.24.0
+
+_Jan 8, 2026_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡️Add bar [batch renderer](https://mui.com/x/react-charts/bars/#performance), result in a significant performance improvement when rendering thousands of bars
+- 📊 Add [range bar chart](https://mui.com/x/react-charts/range-bar/) to render 
+  ![image](https://github.com/user-attachments/assets/4112c09b-d841-42f7-a0c8-d23b61c23ca0)
+- 🌎 Improved Danish (da-DK) and Japanese (ja-JP) locales on the Data Grid
+
+Special thanks go out to these community members for their valuable contributions:
+@anders-noerrelykke, @auloin, @sai6855, @yuito-it
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @JCQuintas, @mapache-salvaje, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.24.0`
+
+- [l10n] Improve Danish (da-DK) locale (#20828) @anders-noerrelykke
+- [l10n] Improve Japanese (ja-JP) locale (#20251) @yuito-it
+
+#### `@mui/x-data-grid-pro@8.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.24.0`, plus:
+
+- [DataGridPro] Fix header filter height for `density="compact"` (#20834) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.24.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.24.0`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.24.0`
+
+- [pickers] Fix Styles applied to PickersDay when MuiPickersDay-dayOutsideMonth is used (#20719) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.24.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.24.0`
+
+- [charts] Add `VisibilityManager` logic to allow managing series/items (#20571) @JCQuintas
+- [charts] Add `identifierSerializer` configuration (#20775) @JCQuintas
+- [charts] Add `serializeIdentifier` instance function (#20791) @JCQuintas
+- [charts] Add bar batch renderer (#20457) @bernardobelchior
+- [charts] Allow animating bar, line, and pie elements to hidden state (#20798) @JCQuintas
+- [charts] Fix failing lint step (#20813) @bernardobelchior
+- [charts] Fix tooltip anchored to item (#20783) @alexfauquette
+- [charts] Fix type casting in getCategoryAxisConfig and applySeriesLayout functions (#20797) @sai6855
+- [charts] Let keyboard navigation avoid overflow and handle nullish values (#20757) @alexfauquette
+- [charts] Refactor `PieChart` and `PieChartPro` to use `slots` and `slotProps` directly (#20795) @sai6855
+- [charts] Refactor `useRegisterPointerEventHandlers` (#20824) @bernardobelchior
+- [charts] Update legend types to allow hiding/showing items (#20784) @JCQuintas
+
+#### `@mui/x-charts-pro@8.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.24.0`, plus:
+
+- [charts-pro] Pass `slotProps.toolbar` to `Toolbar` in `PieChartPro` (#20796) @sai6855
+
+#### `@mui/x-charts-premium@8.24.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.24.0`, plus:
+
+- [charts-premium] Add range bar chart (#20275) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.24.0`
+
+- [tree view] Introduce a Tree View Store to clean the internals (#20051) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.24.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.24.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.24.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Fix axis size default values (#20799) @bernardobelchior
+- [docs] Update What's New in MUI X page with post v8 features (DX-118) (#20787) @alelthomas
+- [docs] Fix `onAccept`'s `context.source` documentation to use 'view' instead of 'picker' (#20465) @auloin
+- [docs] Revise the Charts Brush doc (#20792) @mapache-salvaje
+- [docs] Revise the Charts Highlighting doc (#20788) @mapache-salvaje
+- [docs] Revise the Charts Label doc (#20794) @mapache-salvaje
+- [docs] Revise the Charts Export doc (#20779) @mapache-salvaje
+
+### Core
+
+- [code-infra] Fix v8.23.0 release date (#20767) @bernardobelchior
+- [code-infra] Remove `glob-gitignore` (#20801) @bernardobelchior
+- [code-infra] Remove `nyc` (#20804) @bernardobelchior
+- [code-infra] Remove `stream-browserify` and `null-loader` (#20805) @bernardobelchior
+- [code-infra] Remove `stylelint-config-tailwindcss` (#20807) @bernardobelchior
+- [code-infra] Remove unused `path` package (#20802) @bernardobelchior
+- [code-infra] Retry flaky e2e test on webkit (#20806) @JCQuintas
+- [internal] Add `internal` slot to properly generate components CSS layer (#20763) @siriwatknp
+
 ## 8.23.0
 
-_Dec 23, 2025_
+_Dec 24, 2025_
 
 We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
 

package/ChartDataProviderPro/ChartDataProviderPro.d.ts

@@ -1,4 +1,4 @@
-import { type ChartSeriesType, type ChartAnyPluginSignature, type ChartProviderProps } from '@mui/x-charts/internals';
+import { type ChartSeriesType, type ChartAnyPluginSignature, type ChartProviderProps, type ChartSeriesConfig } from '@mui/x-charts/internals';
 import { type ChartDataProviderProps } from '@mui/x-charts/ChartDataProvider';
 import { type ChartsSlotPropsPro, type ChartsSlotsPro } from "../internals/material/index.js";
 import { type AllPluginSignatures } from "../internals/plugins/allPlugins.js";
@@ -12,6 +12,7 @@ export type ChartDataProviderProProps<TSeries extends ChartSeriesType = ChartSer
    */
   slotProps?: Partial<ChartsSlotPropsPro>;
 };
+export declare const defaultSeriesConfigPro: ChartSeriesConfig<'bar' | 'scatter' | 'line' | 'pie'>;
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *

package/ChartDataProviderPro/ChartDataProviderPro.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChartDataProviderPro = ChartDataProviderPro;
+exports.defaultSeriesConfigPro = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Watermark = require("@mui/x-license/Watermark");
@@ -16,8 +17,10 @@ var _material = require("../internals/material");
 var _allPlugins = require("../internals/plugins/allPlugins");
 var _useChartDataProviderProProps = require("./useChartDataProviderProProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const releaseInfo = "MTc2NjUzNDQwMDAwMA==";
+const releaseInfo = "MTc2NzgzMDQwMDAwMA==";
 const packageIdentifier = 'x-charts-pro';
+const defaultSeriesConfigPro = exports.defaultSeriesConfigPro = _internals.defaultSeriesConfig;
+
 /**
  * Orchestrates the data providers for the chart components and hooks.
  *
@@ -53,6 +56,7 @@ function ChartDataProviderPro(props) {
     slots,
     slotProps
   } = (0, _useChartDataProviderProProps.useChartDataProviderProProps)((0, _extends2.default)({}, props, {
+    seriesConfig: props.seriesConfig ?? defaultSeriesConfigPro,
     plugins: props.plugins ?? _allPlugins.DEFAULT_PLUGINS
   }));
   (0, _useLicenseVerifier.useLicenseVerifier)(packageIdentifier, releaseInfo);

package/ChartDataProviderPro/index.d.ts

@@ -1,2 +1,2 @@
 import "../typeOverloads/index.js";
-export * from "./ChartDataProviderPro.js";
+export { ChartDataProviderPro, type ChartDataProviderProProps } from "./ChartDataProviderPro.js";

package/ChartDataProviderPro/index.js

@@ -3,15 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ChartDataProviderPro", {
+  enumerable: true,
+  get: function () {
+    return _ChartDataProviderPro.ChartDataProviderPro;
+  }
+});
 require("../typeOverloads");
-var _ChartDataProviderPro = require("./ChartDataProviderPro");
-Object.keys(_ChartDataProviderPro).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _ChartDataProviderPro[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _ChartDataProviderPro[key];
-    }
-  });
-});
+var _ChartDataProviderPro = require("./ChartDataProviderPro");

package/ChartZoomSlider/internals/ChartAxisZoomSliderActiveTrack.js

@@ -21,6 +21,7 @@ var _constants = require("./constants");
 var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const ZoomSliderActiveTrackRect = (0, _styles.styled)('rect', {
+  slot: 'internal',
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'preview'
 })(({
   theme

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreview.js

@@ -17,7 +17,10 @@ var _useChartProZoom = require("../../internals/plugins/useChartProZoom");
 var _ChartAxisZoomSliderPreviewContent = require("./ChartAxisZoomSliderPreviewContent");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["axisId", "axisDirection", "reverse"];
-const PreviewBackgroundRect = (0, _styles.styled)('rect')(({
+const PreviewBackgroundRect = (0, _styles.styled)('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   rx: 4,

package/ChartZoomSlider/internals/ChartAxisZoomSliderThumb.js

@@ -18,7 +18,10 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chartAxisZoomSliderThumbClasses = require("./chartAxisZoomSliderThumbClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "onMove", "orientation", "placement", "rx", "ry"];
-const Rect = (0, _styles.styled)('rect')(({
+const Rect = (0, _styles.styled)('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   [`&.${_chartAxisZoomSliderThumbClasses.chartAxisZoomSliderThumbClasses.root}`]: (0, _extends2.default)({

package/ChartZoomSlider/internals/ChartAxisZoomSliderTrack.js

@@ -20,6 +20,7 @@ var _chartAxisZoomSliderTrackClasses = require("./chartAxisZoomSliderTrackClasse
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["axisId", "axisDirection", "reverse", "onSelectStart", "onSelectEnd"];
 const ZoomSliderTrack = (0, _styles.styled)('rect', {
+  slot: 'internal',
   shouldForwardProp: prop => (0, _system.shouldForwardProp)(prop) && prop !== 'axisDirection' && prop !== 'isSelecting'
 })(({
   theme

package/FunnelChart/FunnelChart.js

@@ -191,6 +191,31 @@ process.env.NODE_ENV !== "production" ? FunnelChart.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(['funnel']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    * @default false
@@ -237,6 +262,11 @@ process.env.NODE_ENV !== "production" ? FunnelChart.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/FunnelChart/FunnelChart.plugins.d.ts

@@ -1,5 +1,5 @@
-import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature } from '@mui/x-charts/internals';
+import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { type UseChartFunnelAxisSignature } from "./funnelAxisPlugin/useChartFunnelAxis.types.js";
-export type FunnelChartPluginSignatures = [UseChartFunnelAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartProExportSignature];
+export type FunnelChartPluginSignatures = [UseChartFunnelAxisSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'funnel'>, UseChartProExportSignature];
 export declare const FUNNEL_CHART_PLUGINS: ConvertSignaturesIntoPlugins<FunnelChartPluginSignatures>;

package/FunnelChart/FunnelChart.plugins.js

@@ -7,4 +7,4 @@ exports.FUNNEL_CHART_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartFunnelAxis = require("./funnelAxisPlugin/useChartFunnelAxis");
-const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_useChartFunnelAxis.useChartFunnelAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartHighlight, _useChartProExport.useChartProExport];
+const FUNNEL_CHART_PLUGINS = exports.FUNNEL_CHART_PLUGINS = [_useChartFunnelAxis.useChartFunnelAxis, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartHighlight, _internals.useChartVisibilityManager, _useChartProExport.useChartProExport];

package/FunnelChart/FunnelSection.d.ts

@@ -8,7 +8,7 @@ export interface FunnelSectionProps extends Omit<React.SVGProps<SVGPathElement>,
   classes?: Partial<FunnelSectionClasses>;
   variant?: 'filled' | 'outlined';
 }
-export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, React.SVGProps<SVGPathElement>, {}>;
+export declare const FunnelSectionPath: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.SVGProps<SVGPathElement>, keyof React.SVGProps<SVGPathElement>>, {}>;
 /**
  * @ignore - internal component.
  */

package/FunnelChart/FunnelSection.js

@@ -17,7 +17,10 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _funnelSectionClasses = require("./funnelSectionClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["seriesId", "dataIndex", "classes", "color", "onClick", "className", "variant"];
-const FunnelSectionPath = exports.FunnelSectionPath = (0, _styles.styled)('path')(() => ({
+const FunnelSectionPath = exports.FunnelSectionPath = (0, _styles.styled)('path', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(() => ({
   transition: 'opacity 0.2s ease-in, fill 0.2s ease-in, fill-opacity 0.2s ease-in, filter 0.2s ease-in'
 }));
 

package/FunnelChart/seriesConfig/index.d.ts

@@ -1,2 +1,2 @@
-import type { ChartSeriesTypeConfig } from '@mui/x-charts/internals';
+import { type ChartSeriesTypeConfig } from '@mui/x-charts/internals';
 export declare const funnelSeriesConfig: ChartSeriesTypeConfig<'funnel'>;

package/FunnelChart/seriesConfig/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.funnelSeriesConfig = void 0;
+var _internals = require("@mui/x-charts/internals");
 var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -20,5 +21,6 @@ const funnelSeriesConfig = exports.funnelSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
 };

package/FunnelChart/seriesConfig/legend.js

@@ -11,16 +11,19 @@ const legendGetter = params => {
     series
   } = params;
   return seriesOrder.reduce((acc, seriesId) => {
-    series[seriesId].data.forEach(item => {
+    series[seriesId].data.forEach((item, dataIndex) => {
       const formattedLabel = (0, _internals.getLabel)(item.label, 'legend');
       if (formattedLabel === undefined) {
         return;
       }
+      const id = item.id ?? dataIndex;
       acc.push({
+        type: 'funnel',
         markType: item.labelMarkType ?? series[seriesId].labelMarkType,
         seriesId,
-        id: item.id,
-        itemId: item.id,
+        id,
+        itemId: id,
+        dataIndex,
         color: item.color,
         label: formattedLabel
       });

package/Heatmap/seriesConfig/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.heatmapSeriesConfig = void 0;
+var _internals = require("@mui/x-charts/internals");
 var _extremums = require("./extremums");
 var _seriesProcessor = _interopRequireDefault(require("./seriesProcessor"));
 var _getColor = _interopRequireDefault(require("./getColor"));
@@ -19,5 +20,6 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   tooltipItemPositionGetter: _tooltipPosition.default,
   xExtremumGetter: _extremums.getBaseExtremum,
   yExtremumGetter: _extremums.getBaseExtremum,
-  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default
+  getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
+  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex
 };

package/LineChartPro/LineChartPro.js

@@ -166,6 +166,31 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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.
    */
@@ -232,6 +257,11 @@ process.env.NODE_ENV !== "production" ? LineChartPro.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/LineChartPro/LineChartPro.plugins.d.ts

@@ -1,5 +1,5 @@
-import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins } from '@mui/x-charts/internals';
+import { type UseChartZAxisSignature, type UseChartCartesianAxisSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartHighlightSignature, type UseChartKeyboardNavigationSignature, type UseChartBrushSignature, type ConvertSignaturesIntoPlugins, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
 import { type UseChartProZoomSignature } from "../internals/plugins/useChartProZoom/index.js";
-export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
+export type LineChartProPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'line'>, UseChartKeyboardNavigationSignature, UseChartProZoomSignature, UseChartProExportSignature];
 export declare const LINE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<LineChartProPluginSignatures>;

package/LineChartPro/LineChartPro.plugins.js

@@ -7,4 +7,4 @@ exports.LINE_CHART_PRO_PLUGINS = void 0;
 var _internals = require("@mui/x-charts/internals");
 var _useChartProExport = require("../internals/plugins/useChartProExport");
 var _useChartProZoom = require("../internals/plugins/useChartProZoom");
-const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];
+const LINE_CHART_PRO_PLUGINS = exports.LINE_CHART_PRO_PLUGINS = [_internals.useChartZAxis, _internals.useChartBrush, _internals.useChartTooltip, _internals.useChartInteraction, _internals.useChartCartesianAxis, _internals.useChartHighlight, _internals.useChartVisibilityManager, _internals.useChartKeyboardNavigation, _useChartProZoom.useChartProZoom, _useChartProExport.useChartProExport];

package/PieChartPro/PieChartPro.js

@@ -68,15 +68,15 @@ const PieChartPro = exports.PieChartPro = /*#__PURE__*/React.forwardRef(function
     plugins: _PieChartPro2.PIE_CHART_PRO_PLUGINS
   }), ref);
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  const Toolbar = props.slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
+  const Toolbar = slots?.toolbar ?? _ChartsToolbarPro.ChartsToolbarPro;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProviderPro.ChartDataProviderPro, (0, _extends2.default)({}, chartDataProviderProProps, {
     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 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Toolbar, {}) : null, !hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, {
-        direction: props.slotProps?.legend?.direction ?? 'vertical',
+      children: [showToolbar ? /*#__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, {
@@ -124,6 +124,31 @@ process.env.NODE_ENV !== "production" ? PieChartPro.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.
    */
@@ -162,6 +187,11 @@ process.env.NODE_ENV !== "production" ? PieChartPro.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/PieChartPro/PieChartPro.plugins.d.ts

@@ -1,4 +1,4 @@
-import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartKeyboardNavigationSignature } from '@mui/x-charts/internals';
+import { type ConvertSignaturesIntoPlugins, type UseChartHighlightSignature, type UseChartTooltipSignature, type UseChartInteractionSignature, type UseChartKeyboardNavigationSignature, type UseChartVisibilityManagerSignature } from '@mui/x-charts/internals';
 import { type UseChartProExportSignature } from "../internals/plugins/useChartProExport/index.js";
-export type PieChartProPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
+export type PieChartProPluginSignatures = [UseChartTooltipSignature, UseChartInteractionSignature, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'pie'>, UseChartKeyboardNavigationSignature, UseChartProExportSignature];
 export declare const PIE_CHART_PRO_PLUGINS: ConvertSignaturesIntoPlugins<PieChartProPluginSignatures>;

package/RadarChartPro/RadarChartPro.js

@@ -93,6 +93,31 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.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.
    */
@@ -149,6 +174,11 @@ process.env.NODE_ENV !== "production" ? RadarChartPro.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.
    *