@mui/x-charts 8.22.1 → 8.24.0

package/BarChart/useRegisterItemClickHandlers.js

@@ -0,0 +1,72 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRegisterItemClickHandlers = useRegisterItemClickHandlers;
+var React = _interopRequireWildcard(require("react"));
+var _useSvgRef = require("../hooks/useSvgRef");
+var _ChartProvider = require("../context/ChartProvider");
+var _getSVGPoint = require("../internals/getSVGPoint");
+var _useStore = require("../internals/store/useStore");
+var _useChartCartesianAxisPosition = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors");
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+function useRegisterItemClickHandlers(onItemClick) {
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
+  const svgRef = (0, _useSvgRef.useSvgRef)();
+  const store = (0, _useStore.useStore)();
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (!element || !onItemClick) {
+      return undefined;
+    }
+    let lastPointerUp = null;
+    const onClick = function onClick(event) {
+      let point = event;
+
+      /* The click event doesn't contain decimal values in clientX/Y, but the pointermove does.
+       * This caused a problem when rendering many bars that were thinner than a pixel where the tooltip or the highlight
+       * would refer to a different bar than the click since those rely on the pointermove event.
+       * As a fix, we use the pointerup event to get the decimal values and check if the pointer up event was close enough
+       * to the click event (1px difference in each direction); if so, then we can use the pointerup's clientX/Y; if not,
+       * we default to the click event's clientX/Y. */
+      if (lastPointerUp) {
+        if (Math.abs(event.clientX - lastPointerUp.clientX) <= 1 && Math.abs(event.clientY - lastPointerUp.clientY) <= 1) {
+          point = {
+            clientX: lastPointerUp.clientX,
+            clientY: lastPointerUp.clientY
+          };
+        }
+      }
+      lastPointerUp = null;
+      const svgPoint = (0, _getSVGPoint.getSVGPoint)(element, point);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        return;
+      }
+      const item = (0, _useChartCartesianAxisPosition.selectorBarItemAtPosition)(store.state, svgPoint);
+      if (item) {
+        onItemClick(event, {
+          type: 'bar',
+          seriesId: item.seriesId,
+          dataIndex: item.dataIndex
+        });
+      }
+    };
+    const onPointerUp = function onPointerUp(event) {
+      lastPointerUp = event;
+    };
+    element.addEventListener('click', onClick);
+    element.addEventListener('pointerup', onPointerUp);
+    return () => {
+      element.removeEventListener('click', onClick);
+      element.removeEventListener('pointerup', onPointerUp);
+    };
+  }, [instance, onItemClick, store, svgRef]);
+}

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/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