@mui/x-charts 8.23.0 → 8.24.0

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/ChartContainer/ChartContainer.js

@@ -102,6 +102,35 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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.any,
+    seriesId: _propTypes.default.shape({
+      toLocaleString: _propTypes.default.func.isRequired,
+      toString: _propTypes.default.func.isRequired,
+      valueOf: _propTypes.default.func.isRequired
+    }),
+    type: _propTypes.default.object.isRequired
+  })),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -146,6 +175,11 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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/ChartContainer/useChartContainerProps.js

@@ -9,7 +9,7 @@ exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _allPlugins = require("../internals/plugins/allPlugins");
-const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig"];
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "onAxisClick", "highlightedAxis", "onHighlightedAxisChange", "disableVoronoi", "voronoiMaxRadius", "onItemClick", "disableAxisListener", "highlightedItem", "onHighlightChange", "sx", "title", "xAxis", "yAxis", "zAxis", "rotationAxis", "radiusAxis", "skipAnimation", "seriesConfig", "plugins", "localeText", "slots", "slotProps", "experimentalFeatures", "enableKeyboardNavigation", "brushConfig", "onHiddenItemsChange", "hiddenItems"];
 const useChartContainerProps = (props, ref) => {
   const _ref = props,
     {
@@ -45,7 +45,9 @@ const useChartContainerProps = (props, ref) => {
       slotProps,
       experimentalFeatures,
       enableKeyboardNavigation,
-      brushConfig
+      brushConfig,
+      onHiddenItemsChange,
+      hiddenItems
     } = _ref,
     other = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const chartsSurfaceProps = (0, _extends2.default)({
@@ -81,6 +83,8 @@ const useChartContainerProps = (props, ref) => {
     experimentalFeatures,
     enableKeyboardNavigation,
     brushConfig,
+    onHiddenItemsChange,
+    hiddenItems,
     plugins: plugins ?? _allPlugins.DEFAULT_PLUGINS,
     slots,
     slotProps

package/ChartsLegend/ChartsLegend.js

@@ -89,7 +89,7 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
     children: data.items.map((item, i) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
         className: classes?.item,
-        "data-series": item.id,
+        "data-series": item.seriesId,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,
@@ -106,7 +106,7 @@ const ChartsLegend = exports.ChartsLegend = (0, _consumeSlots.consumeSlots)('Mui
             children: item.label
           })]
         })
-      }, item.id);
+      }, `${item.seriesId}-${item.dataIndex}`);
     })
   }));
 }));

package/ChartsLegend/legendContext.types.d.ts

@@ -1,6 +1,7 @@
 import { type ChartsLabelMarkProps } from "../ChartsLabel/ChartsLabelMark.js";
 import { type PieItemId } from "../models/index.js";
 import { type SeriesId } from "../models/seriesType/common.js";
+import type { ChartSeriesType } from "../models/seriesType/config.js";
 interface LegendItemContextBase {
   /**
    * The color used in the legend
@@ -15,8 +16,14 @@ export interface LegendItemParams extends Partial<Omit<SeriesLegendItemContext,
   /**
    * The identifier of the legend element.
    * Used for internal purpose such as `key` props
+   * @deprecated use `seriesId` and `dataIndex` instead
    */
   id: number | string;
+  /**
+   * The type of the series
+   * This property is always defined, but marked as optional to avoid breaking changes. It will become required in a future major version.
+   */
+  type?: ChartSeriesType;
   markType: ChartsLabelMarkProps['type'];
 }
 export interface SeriesLegendItemContext extends LegendItemContextBase {
@@ -32,8 +39,13 @@ export interface SeriesLegendItemContext extends LegendItemContextBase {
   seriesId: SeriesId;
   /**
    * The identifier of the pie item
+   * @deprecated use `dataIndex` instead
    */
   itemId?: PieItemId;
+  /**
+   * The data index of the item in the series data array
+   */
+  dataIndex?: number;
 }
 export interface PiecewiseColorLegendItemContext extends LegendItemContextBase {
   /**

package/ChartsLegend/onClickContextBuilder.js

@@ -9,6 +9,7 @@ const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId
+  itemId: context.itemId,
+  dataIndex: context.dataIndex
 });
 exports.seriesContextBuilder = seriesContextBuilder;

package/ChartsOverlay/ChartsLoadingOverlay.js

@@ -13,7 +13,10 @@ var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["message"];
-const StyledText = (0, _styles.styled)('text')(({
+const StyledText = (0, _styles.styled)('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',

package/ChartsOverlay/ChartsNoDataOverlay.js

@@ -13,7 +13,10 @@ var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartsLocalization = require("../hooks/useChartsLocalization");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["message"];
-const StyledText = (0, _styles.styled)('text')(({
+const StyledText = (0, _styles.styled)('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => (0, _extends2.default)({}, theme.typography.body2, {
   stroke: 'none',

package/ChartsReferenceLine/common.d.ts

@@ -40,4 +40,4 @@ export type CommonChartsReferenceLineProps = {
    */
   classes?: Partial<ChartsReferenceLineClasses>;
 };
-export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGGElement>, {}>;
+export declare const ReferenceLineRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;

package/ChartsReferenceLine/common.js

@@ -10,7 +10,10 @@ var _styles = require("@mui/material/styles");
 var _chartsReferenceLineClasses = require("./chartsReferenceLineClasses");
 const DEFAULT_SPACING = exports.DEFAULT_SPACING = 5;
 const DEFAULT_SPACING_MIDDLE_OTHER_AXIS = exports.DEFAULT_SPACING_MIDDLE_OTHER_AXIS = 0;
-const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g')(({
+const ReferenceLineRoot = exports.ReferenceLineRoot = (0, _styles.styled)('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   [`& .${_chartsReferenceLineClasses.referenceLineClasses.line}`]: {

package/ChartsTooltip/ChartsTooltipContainer.js

@@ -10,6 +10,7 @@ exports.ChartsTooltipContainer = ChartsTooltipContainer;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
@@ -79,6 +80,7 @@ function ChartsTooltipContainer(inProps) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const svgRef = (0, _hooks.useSvgRef)();
+  const anchorRef = React.useRef(null);
   const classes = (0, _chartsTooltipClasses.useUtilityClasses)(propClasses);
   const pointerType = (0, _utils.usePointerType)();
   const isFineMainPointer = (0, _utils.useIsFineMainPointer)();
@@ -100,18 +102,11 @@ function ChartsTooltipContainer(inProps) {
       return () => {};
     }
     if (itemPosition !== null) {
-      const positionUpdate = (0, _rafThrottle.rafThrottle)(() => {
-        // eslint-disable-next-line react-compiler/react-compiler
-        positionRef.current = {
-          x: svgElement.getBoundingClientRect().left + (itemPosition?.x ?? 0),
-          y: svgElement.getBoundingClientRect().top + (itemPosition?.y ?? 0)
-        };
-        popperRef.current?.update();
-      });
-      positionUpdate();
-      return () => positionUpdate.clear();
+      // Tooltip position is already handled by the anchor element
+      return undefined;
     }
     const pointerUpdate = (0, _rafThrottle.rafThrottle)((x, y) => {
+      // eslint-disable-next-line react-compiler/react-compiler
       positionRef.current = {
         x,
         y
@@ -131,7 +126,7 @@ function ChartsTooltipContainer(inProps) {
       pointerUpdate.clear();
     };
   }, [svgRef, positionRef, itemPosition]);
-  const anchorEl = React.useMemo(() => ({
+  const pointerAnchorEl = React.useMemo(() => ({
     getBoundingClientRect: () => ({
       x: positionRef.current.x,
       y: positionRef.current.y,
@@ -173,16 +168,25 @@ function ChartsTooltipContainer(inProps) {
   if (trigger === 'none') {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
-    children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
-      className: classes?.root,
-      open: isOpen,
-      placement: other.placement ?? position ?? (isMouse ? 'right-start' : 'top'),
-      popperRef: popperRef,
-      anchorEl: anchorEl,
-      modifiers: modifiers,
-      children: children
-    }))
+  if (itemPosition !== null && anchorRef.current) {
+    anchorRef.current.setAttribute('x', String(itemPosition.x));
+    anchorRef.current.setAttribute('y', String(itemPosition.y));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [svgRef.current && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+      ref: anchorRef,
+      display: "hidden"
+    }), svgRef.current), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NoSsr.default, {
+      children: isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartsTooltipRoot, (0, _extends2.default)({}, other, {
+        className: classes?.root,
+        open: isOpen,
+        placement: other.placement ?? position ?? (pointerType !== null && isMouse ? 'right-start' : 'top'),
+        popperRef: popperRef,
+        anchorEl: itemPosition ? anchorRef.current : pointerAnchorEl,
+        modifiers: modifiers,
+        children: children
+      }))
+    })]
   });
 }
 process.env.NODE_ENV !== "production" ? ChartsTooltipContainer.propTypes = {

package/Gauge/GaugeContainer.js

@@ -18,7 +18,10 @@ var _ChartProvider = require("../context/ChartProvider");
 var _defaultizeMargin = require("../internals/defaultizeMargin");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["width", "height", "margin", "title", "desc", "value", "valueMin", "valueMax", "startAngle", "endAngle", "outerRadius", "innerRadius", "cornerRadius", "cx", "cy", "children"];
-const GStyled = (0, _styles.styled)('g')(({
+const GStyled = (0, _styles.styled)('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   '& text': {

package/LineChart/AnimatedLine.js

@@ -31,9 +31,12 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
       ownerState
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const animateProps = (0, _hooks.useAnimateLine)((0, _extends2.default)({}, props, {
+  const animateProps = (0, _hooks.useAnimateLine)({
+    d: props.d,
+    skipAnimation,
     ref
-  }));
+  });
+  const fadedOpacity = ownerState.isFaded ? 0.3 : 1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_AppearingMask.AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
@@ -43,7 +46,7 @@ const AnimatedLine = exports.AnimatedLine = /*#__PURE__*/React.forwardRef(functi
       strokeLinejoin: "round",
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
-      opacity: ownerState.isFaded ? 0.3 : 1,
+      opacity: ownerState.hidden ? 0 : fadedOpacity,
       "data-series": ownerState.id,
       "data-highlighted": ownerState.isHighlighted || undefined,
       "data-faded": ownerState.isFaded || undefined
@@ -61,6 +64,7 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
     classes: _propTypes.default.object,
     color: _propTypes.default.string.isRequired,
     gradientId: _propTypes.default.string,
+    hidden: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
     isFaded: _propTypes.default.bool.isRequired,
     isHighlighted: _propTypes.default.bool.isRequired

package/LineChart/AppearingMask.js

@@ -16,7 +16,10 @@ var _cleanId = require("../internals/cleanId");
 var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const appearingMaskClasses = exports.appearingMaskClasses = (0, _generateUtilityClasses.default)('MuiAppearingMask', ['animate']);
-const AnimatedRect = (0, _styles.styled)('rect')({
+const AnimatedRect = (0, _styles.styled)('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   animationName: 'animate-width',
   animationTimingFunction: _animation.ANIMATION_TIMING_FUNCTION,
   animationDuration: '0s',

package/LineChart/CircleMarkElement.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { type MarkElementOwnerState } from "./markElementClasses.js";
 export type CircleMarkElementProps = 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/CircleMarkElement.js

@@ -16,8 +16,11 @@ var _animation = require("../internals/animation/animation");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _markElementClasses = require("./markElementClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted"];
-const Circle = (0, _styles.styled)('circle')({
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "isFaded", "isHighlighted", "shape", "hidden"];
+const Circle = (0, _styles.styled)('circle', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   [`&.${_markElementClasses.markElementClasses.animate}`]: {
     transitionDuration: `${_animation.ANIMATION_DURATION_MS}ms`,
     transitionProperty: 'cx, cy, opacity',
@@ -49,6 +52,10 @@ function CircleMarkElement(props) {
       skipAnimation,
       isFaded = false,
       isHighlighted = false
+      // @ts-expect-error, prevents it from being passed to the svg element
+      ,
+
+      hidden
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const theme = (0, _styles.useTheme)();
@@ -62,7 +69,6 @@ function CircleMarkElement(props) {
     classes: innerClasses,
     isHighlighted,
     isFaded,
-    color,
     skipAnimation
   };
   const classes = (0, _markElementClasses.useUtilityClasses)(ownerState);
@@ -75,10 +81,12 @@ function CircleMarkElement(props) {
     strokeWidth: 2,
     className: classes.root,
     onClick: onClick,
-    cursor: onClick ? 'pointer' : 'unset'
+    cursor: onClick ? 'pointer' : 'unset',
+    pointerEvents: hidden ? 'none' : undefined
   }, interactionProps, {
     "data-highlighted": isHighlighted || undefined,
-    "data-faded": isFaded || undefined
+    "data-faded": isFaded || undefined,
+    opacity: hidden ? 0 : 1
   }));
 }
 process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {

package/LineChart/FocusedLineMark.js

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

package/LineChart/LineChart.js

@@ -145,6 +145,31 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * List of hidden series and/or items.
+   *
+   * Different chart types use different keys.
+   *
+   * @example
+   * ```ts
+   * [
+   *   {
+   *     type: 'pie',
+   *     seriesId: 'series-1',
+   *     dataIndex: 3,
+   *   },
+   *   {
+   *     type: 'line',
+   *     seriesId: 'series-2',
+   *   }
+   * ]
+   * ```
+   */
+  hiddenItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    dataIndex: _propTypes.default.number,
+    seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+    type: _propTypes.default.oneOf(['line']).isRequired
+  })),
   /**
    * If `true`, the legend is not rendered.
    */
@@ -202,6 +227,11 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {null | ChartsAxisData} data The data about the clicked axis and items associated with it.
    */
   onAxisClick: _propTypes.default.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: _propTypes.default.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/LineChart/LineChart.plugins.d.ts

@@ -6,5 +6,6 @@ import { type UseChartHighlightSignature } from "../internals/plugins/featurePlu
 import { type UseChartKeyboardNavigationSignature } from "../internals/plugins/featurePlugins/useChartKeyboardNavigation/index.js";
 import { type ConvertSignaturesIntoPlugins } from "../internals/plugins/models/helpers.js";
 import { type UseChartBrushSignature } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartKeyboardNavigationSignature];
+import { type UseChartVisibilityManagerSignature } from "../internals/plugins/featurePlugins/useChartVisibilityManager/index.js";
+export type LineChartPluginSignatures = [UseChartZAxisSignature, UseChartBrushSignature, UseChartTooltipSignature, UseChartInteractionSignature, UseChartCartesianAxisSignature<'line'>, UseChartHighlightSignature, UseChartVisibilityManagerSignature<'line'>, UseChartKeyboardNavigationSignature];
 export declare const LINE_CHART_PLUGINS: ConvertSignaturesIntoPlugins<LineChartPluginSignatures>;

package/LineChart/LineChart.plugins.js

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

package/LineChart/LineElement.d.ts

@@ -23,6 +23,8 @@ export interface LineElementOwnerState {
   isFaded: boolean;
   isHighlighted: boolean;
   classes?: Partial<LineElementClasses>;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
 }
 export declare function getLineElementUtilityClass(slot: string): string;
 export declare const lineElementClasses: LineElementClasses;
@@ -38,6 +40,8 @@ export interface LineElementSlotProps {
 }
 export interface LineElementProps extends Omit<LineElementOwnerState, 'isFaded' | 'isHighlighted'>, Pick<AnimatedLineProps, 'skipAnimation'>, Omit<React.SVGProps<SVGPathElement>, 'ref' | 'color' | 'id'> {
   d: string;
+  /** If `true`, the line is hidden. */
+  hidden?: boolean;
   /**
    * The props used for each component slot.
    * @default {}

package/LineChart/LineElement.js

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