@mui/x-charts-pro 8.22.1 → 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,6 +5,217 @@
 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 24, 2025_
+
+We'd like to extend a big thank you to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧮 Support Data Grid `size`, `size(true)`, and `size(false)` [aggregations for `'boolean'` column type](https://mui.com/x/react-data-grid/aggregation/#usage-with-row-grouping)
+- 🔎 Allow zooming a heatmap
+
+Special thanks go out to these community members for their valuable contributions:
+@henkerik, @sai6855
+
+The following team members contributed to this release:
+@alelthomas, @alexfauquette, @arminmeh, @bernardobelchior, @brijeshb42, @flaviendelangle, @JCQuintas, @mapache-salvaje, @MBilalShafi, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.23.0`
+
+- [DataGrid] Fix columns state and columns prop sync issue (#20703) @arminmeh
+- [DataGrid] Fix filter datetime with seconds (#20557) @siriwatknp
+- [DataGrid] Add new `includeHeaderFilters` flag to include header filters when autosizing columns (#20510) @siriwatknp
+- [DataGrid] Prevent default on `Enter` key down when starting editing (#20751) @siriwatknp
+- [l10n] Improve Portuguese from Portugal (pt-PT) locale (#20722) @Copilot
+
+#### `@mui/x-data-grid-pro@8.23.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.23.0`, plus:
+
+- [DataGridPro] Fix crash on rows change in tree data with pagination (#20215) @Copilot
+
+#### `@mui/x-data-grid-premium@8.23.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.23.0`, plus:
+
+- [DataGridPremium] Add aggregation for `'boolean'` column type (#20683) @arminmeh
+- [DataGridPremium] Fix strategy value computation with row grouping (#20725) @MBilalShafi
+- [DataGridPremium] Handle `isRowSelectable()` checks for the rows missing due to `keepNonExistentRowsSelected` (#20668) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.23.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.23.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.23.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.23.0`
+
+- [charts] Custom stack functions implementation (#20679) @JCQuintas
+- [charts] Extract keyboard focus navigation to the series config (#20693) @alexfauquette
+- [charts] Fix demo not wrapping in mobile (#20713) @JCQuintas
+- [charts] Fix missing dependencies in `x-charts-vendor` (#20685) @henkerik
+- [charts] Remove webkit test differences (#20707) @JCQuintas
+
+#### `@mui/x-charts-pro@8.23.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.23.0`, plus:
+
+- [charts-pro] Allow registering preview plots from higher tier packages (#20716) @bernardobelchior
+- [charts-pro] Fix erroneous behavior when adding/removing pointers from zoom&pan gestures (#20698) @JCQuintas
+- [charts-pro] Move heatmap highlight handling to plot component (#20701) @bernardobelchior
+- [charts-pro] Add zoom to heatmap (#20708) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.23.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.23.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.23.0`
+
+- [tree view] Add new APIs to disable selection feature for tree view item (#20666) @siriwatknp
+
+#### `@mui/x-tree-view-pro@8.23.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.23.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.23.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Clarify feature availability and relationship between Community and Pro/Premium docs (#20714) @mapache-salvaje
+- [docs] Copyedit Tree View docs and apply new component style rules (DX-19) (#20652) @mapache-salvaje
+- [docs] Fix `ColumnPinningDynamicRowHeight` demo (#20750) @sai6855
+- [docs] Clean up Charts docs sidebar (DX-97) (#20700) @alelthomas
+- [docs] Fix tick labels not being shown on a demo (#20718) @sai6855
+
+### Core
+
+- [code-infra] Bump prettier to 3.7.4 (#20709) @JCQuintas
+- [code-infra] Fix contributor generation logic in changelog script (#20705) @brijeshb42
+
 ## 8.22.1
 
 _Dec 17, 2025_

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 = "MTc2NjAxNjAwMDAwMA==";
+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/ChartAxisZoomSliderPreviewContent.d.ts

@@ -1,10 +1,9 @@
 import { type AxisId } from '@mui/x-charts/internals';
-interface ChartAxisZoomSliderPreviewContentProps {
+export interface ChartAxisZoomSliderPreviewContentProps {
   axisId: AxisId;
   x: number;
   y: number;
   height: number;
   width: number;
 }
-export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function ChartAxisZoomSliderPreviewContent(props: ChartAxisZoomSliderPreviewContentProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/ChartAxisZoomSliderPreviewContent.js

@@ -9,10 +9,7 @@ exports.ChartAxisZoomSliderPreviewContent = ChartAxisZoomSliderPreviewContent;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-charts/internals");
-var _LinePreviewPlot = require("./previews/LinePreviewPlot");
-var _AreaPreviewPlot = require("./previews/AreaPreviewPlot");
-var _BarPreviewPlot = require("./previews/BarPreviewPlot");
-var _ScatterPreviewPlot = require("./previews/ScatterPreviewPlot");
+var _seriesPreviewPlotMap = require("./seriesPreviewPlotMap");
 var _jsxRuntime = require("react/jsx-runtime");
 function ChartAxisZoomSliderPreviewContent(props) {
   const {
@@ -26,24 +23,11 @@ function ChartAxisZoomSliderPreviewContent(props) {
   const processedSeries = store.use(_internals.selectorChartSeriesProcessed);
   const children = [];
   const clipId = `zoom-preview-mask-${axisId}`;
-  const hasLineSeries = (processedSeries.line?.seriesOrder?.length ?? 0) > 0;
-  const hasBarSeries = (processedSeries.bar?.seriesOrder?.length ?? 0) > 0;
-  const hasScatterSeries = (processedSeries.scatter?.seriesOrder?.length ?? 0) > 0;
-  if (hasLineSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPreviewPlot.AreaPreviewPlot, {
-      axisId: axisId
-    }, "area"));
-  }
-  if (hasBarSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPreviewPlot.BarPreviewPlot, (0, _extends2.default)({}, props), "bar"));
-  }
-  if (hasLineSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePreviewPlot.LinePreviewPlot, {
-      axisId: axisId
-    }, "line"));
-  }
-  if (hasScatterSeries) {
-    children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPreviewPlot.ScatterPreviewPlot, (0, _extends2.default)({}, props), "scatter"));
+  for (const [seriesType, Component] of _seriesPreviewPlotMap.seriesPreviewPlotMap) {
+    const hasSeries = (processedSeries[seriesType]?.seriesOrder?.length ?? 0) > 0;
+    if (hasSeries) {
+      children.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, (0, _extends2.default)({}, props), seriesType));
+    }
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("clipPath", {

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/ChartZoomSlider/internals/previews/AreaPreviewPlot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
 import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface AreaPreviewPlotProps extends PreviewPlotProps {}
+interface AreaPreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 export declare function AreaPreviewPlot({
   axisId
 }: AreaPreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.d.ts

@@ -0,0 +1,4 @@
+import { type PreviewPlotProps } from "./PreviewPlot.types.js";
+export declare function LineAreaPreviewPlot({
+  axisId
+}: PreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/previews/LineAreaPreviewPlot.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LineAreaPreviewPlot = LineAreaPreviewPlot;
+var React = _interopRequireWildcard(require("react"));
+var _AreaPreviewPlot = require("./AreaPreviewPlot");
+var _LinePreviewPlot = require("./LinePreviewPlot");
+var _jsxRuntime = require("react/jsx-runtime");
+function LineAreaPreviewPlot({
+  axisId
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPreviewPlot.AreaPreviewPlot, {
+      axisId: axisId
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePreviewPlot.LinePreviewPlot, {
+      axisId: axisId
+    })]
+  });
+}

package/ChartZoomSlider/internals/previews/LinePreviewPlot.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type SeriesId } from '@mui/x-charts/internals';
-import { type PreviewPlotProps } from "./PreviewPlot.types.js";
-interface LinePreviewPlotProps extends PreviewPlotProps {}
+import type { PreviewPlotProps } from "./PreviewPlot.types.js";
+interface LinePreviewPlotProps extends Pick<PreviewPlotProps, 'axisId'> {}
 export declare function LinePreviewPlot({
   axisId
 }: LinePreviewPlotProps): import("react/jsx-runtime").JSX.Element;

package/ChartZoomSlider/internals/previews/PreviewPlot.types.d.ts

@@ -1,4 +1,8 @@
 import { type AxisId } from '@mui/x-charts/internals';
 export interface PreviewPlotProps {
   axisId: AxisId;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
 }

package/ChartZoomSlider/internals/seriesPreviewPlotMap.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { type PreviewPlotProps } from "./previews/PreviewPlot.types.js";
+export declare const seriesPreviewPlotMap: Map<keyof import("@mui/x-charts/internals").ChartsSeriesConfig, React.ComponentType<PreviewPlotProps>>;

package/ChartZoomSlider/internals/seriesPreviewPlotMap.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.seriesPreviewPlotMap = void 0;
+var _BarPreviewPlot = require("./previews/BarPreviewPlot");
+var _ScatterPreviewPlot = require("./previews/ScatterPreviewPlot");
+var _LineAreaPreviewPlot = require("./previews/LineAreaPreviewPlot");
+const seriesPreviewPlotMap = exports.seriesPreviewPlotMap = new Map([['bar', _BarPreviewPlot.BarPreviewPlot], ['line', _LineAreaPreviewPlot.LineAreaPreviewPlot], ['scatter', _ScatterPreviewPlot.ScatterPreviewPlot]]);

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'>;