@mui/x-charts 8.22.1 → 8.24.0

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.d.ts

@@ -0,0 +1,3 @@
+import type { KeyboardFocusHandler } from "../../../internals/plugins/featurePlugins/useChartKeyboardNavigation/keyboardFocusHandler.types.js";
+declare const keyboardFocusHandler: KeyboardFocusHandler<'bar', 'bar' | 'line' | 'scatter'>;
+export default keyboardFocusHandler;

package/esm/BarChart/seriesConfig/bar/keyboardFocusHandler.js

@@ -0,0 +1,17 @@
+import { createGetNextIndexFocusedItem, createGetPreviousIndexFocusedItem, createGetNextSeriesFocusedItem, createGetPreviousSeriesFocusedItem } from "../../../internals/commonNextFocusItem.js";
+const outSeriesTypes = new Set(['bar', 'line', 'scatter']);
+const keyboardFocusHandler = event => {
+  switch (event.key) {
+    case 'ArrowRight':
+      return createGetNextIndexFocusedItem(outSeriesTypes);
+    case 'ArrowLeft':
+      return createGetPreviousIndexFocusedItem(outSeriesTypes);
+    case 'ArrowDown':
+      return createGetPreviousSeriesFocusedItem(outSeriesTypes);
+    case 'ArrowUp':
+      return createGetNextSeriesFocusedItem(outSeriesTypes);
+    default:
+      return null;
+  }
+};
+export default keyboardFocusHandler;

package/esm/BarChart/seriesConfig/bar/legend.js

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

package/esm/BarChart/seriesConfig/bar/seriesProcessor.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { warnOnce } from '@mui/x-internals/warning';
-import { getStackingGroups } from "../../../internals/stackSeries.js";
+import { getStackingGroups } from "../../../internals/stacking/index.js";
 const barValueFormatter = v => v == null ? '' : v.toLocaleString();
 const seriesProcessor = (params, dataset) => {
   const {

package/esm/BarChart/seriesConfig/index.js

@@ -2,9 +2,11 @@ import { getExtremumX, getExtremumY } from "./bar/extremums.js";
 import seriesProcessor from "./bar/seriesProcessor.js";
 import legendGetter from "./bar/legend.js";
 import getColor from "./bar/getColor.js";
+import keyboardFocusHandler from "./bar/keyboardFocusHandler.js";
 import tooltipGetter, { axisTooltipGetter } from "./bar/tooltip.js";
 import tooltipItemPositionGetter from "./bar/tooltipPosition.js";
 import { getSeriesWithDefaultValues } from "./bar/getSeriesWithDefaultValues.js";
+import { identifierSerializerSeriesIdDataIndex } from "../../internals/identifierSerializer.js";
 export const barSeriesConfig = {
   seriesProcessor,
   colorProcessor: getColor,
@@ -14,5 +16,7 @@ export const barSeriesConfig = {
   axisTooltipGetter,
   xExtremumGetter: getExtremumX,
   yExtremumGetter: getExtremumY,
-  getSeriesWithDefaultValues
+  getSeriesWithDefaultValues,
+  keyboardFocusHandler,
+  identifierSerializer: identifierSerializerSeriesIdDataIndex
 };

package/esm/BarChart/types.d.ts

@@ -15,12 +15,14 @@ export interface ProcessedBarSeriesData {
   xOrigin: number;
   yOrigin: number;
 }
+export type BorderRadiusSide = 'top' | 'bottom' | 'left' | 'right';
 export interface ProcessedBarData extends AnimationData {
   seriesId: SeriesId;
   dataIndex: number;
   color: string;
   value: number | null;
   maskId: string;
+  borderRadiusSide?: BorderRadiusSide;
 }
 export interface MaskData extends AnimationData {
   id: string;

package/esm/BarChart/useBarChartProps.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BarChartProps } from "./BarChart.js";
+import { type BarChartProps, type BarSeries } from "./BarChart.js";
 import { type ChartContainerProps } from "../ChartContainer/index.js";
 import { type BarPlotProps } from "./BarPlot.js";
 import { type ChartsGridProps } from "../ChartsGrid/index.js";
@@ -10,6 +10,10 @@ import { type ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
 import { type ChartsLegendSlotExtension } from "../ChartsLegend/index.js";
 import type { ChartsWrapperProps } from "../ChartsWrapper/index.js";
 import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
+export interface UseBarChartPropsExtensions {}
+export type UseBarChartProps = Omit<BarChartProps, 'series'> & Omit<{
+  series: ReadonlyArray<BarSeries>;
+}, keyof UseBarChartPropsExtensions> & UseBarChartPropsExtensions;
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -17,7 +21,7 @@ import { type BarChartPluginSignatures } from "./BarChart.plugins.js";
  * @param props The input props for BarChart
  * @returns An object with props for the children components of BarChart
  */
-export declare const useBarChartProps: (props: BarChartProps) => {
+export declare const useBarChartProps: (props: UseBarChartProps) => {
   chartsWrapperProps: Omit<ChartsWrapperProps, "children">;
   chartContainerProps: ChartContainerProps<"bar", BarChartPluginSignatures>;
   barPlotProps: BarPlotProps;

package/esm/BarChart/useBarChartProps.js

@@ -2,12 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "axisHighlight", "grid", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend", "showToolbar", "brushConfig", "renderer"];
 import * as React from 'react';
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 import { BAR_CHART_PLUGINS } from "./BarChart.plugins.js";
-
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -40,7 +39,8 @@ export const useBarChartProps = props => {
       borderRadius,
       barLabel,
       className,
-      brushConfig
+      brushConfig,
+      renderer
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -105,6 +105,7 @@ export const useBarChartProps = props => {
     slots,
     slotProps,
     borderRadius,
+    renderer,
     barLabel
   };
   const gridProps = {

package/esm/BarChart/useBarPlotData.d.ts

@@ -1,7 +1,7 @@
 import { type ChartsXAxisProps, type ChartsYAxisProps } from "../models/axis.js";
-import { type ChartDrawingArea } from "../hooks/index.js";
 import { type MaskData, type ProcessedBarSeriesData } from "./types.js";
 import { type ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.types.js";
+import { type ChartDrawingArea } from "../hooks/useDrawingArea.js";
 export declare function useBarPlotData(drawingArea: ChartDrawingArea, xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): {
   completedData: ProcessedBarSeriesData[];
   masksData: MaskData[];

package/esm/BarChart/useBarPlotData.js

@@ -1,9 +1,10 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import getColor from "./seriesConfig/bar/getColor.js";
-import { useChartId, useXAxes, useYAxes } from "../hooks/index.js";
+import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { checkBarChartScaleErrors } from "./checkBarChartScaleErrors.js";
 import { useBarSeriesContext } from "../hooks/useBarSeries.js";
 import { getBarDimensions } from "../internals/getBarDimensions.js";
+import { useChartId } from "../hooks/useChartId.js";
 export function useBarPlotData(drawingArea, xAxes, yAxes) {
   const seriesData = useBarSeriesContext() ?? {
     series: {},
@@ -25,6 +26,8 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
     const xMax = drawingArea.left + drawingArea.width;
     const yMin = drawingArea.top;
     const yMax = drawingArea.top + drawingArea.height;
+    const lastNegativePerIndex = new Map();
+    const lastPositivePerIndex = new Map();
     return seriesIds.map(seriesId => {
       const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
       const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
@@ -66,6 +69,22 @@ export function useBarPlotData(drawingArea, xAxes, yAxes) {
         if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
           continue;
         }
+        const lastNegative = lastNegativePerIndex.get(dataIndex);
+        const lastPositive = lastPositivePerIndex.get(dataIndex);
+        const sign = (reverse ? -1 : 1) * Math.sign(result.value ?? 0);
+        if (sign > 0) {
+          if (lastPositive) {
+            delete lastPositive.borderRadiusSide;
+          }
+          result.borderRadiusSide = verticalLayout ? 'top' : 'right';
+          lastPositivePerIndex.set(dataIndex, result);
+        } else if (sign < 0) {
+          if (lastNegative) {
+            delete lastNegative.borderRadiusSide;
+          }
+          result.borderRadiusSide = verticalLayout ? 'bottom' : 'left';
+          lastNegativePerIndex.set(dataIndex, result);
+        }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
             id: result.maskId,

package/esm/BarChart/useRegisterItemClickHandlers.d.ts

@@ -0,0 +1,6 @@
+import { type BarItemIdentifier } from "../models/seriesType/index.js";
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+export declare function useRegisterItemClickHandlers(onItemClick: ((event: MouseEvent, barItemIdentifier: BarItemIdentifier) => void) | undefined): void;

package/esm/BarChart/useRegisterItemClickHandlers.js

@@ -0,0 +1,67 @@
+'use client';
+
+import * as React from 'react';
+import { useSvgRef } from "../hooks/useSvgRef.js";
+import { useChartContext } from "../context/ChartProvider/index.js";
+import { getSVGPoint } from "../internals/getSVGPoint.js";
+import { useStore } from "../internals/store/useStore.js";
+import { selectorBarItemAtPosition } from "../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxisPosition.selectors.js";
+
+/**
+ * Hook that registers pointer event handlers for chart item clicking.
+ * @param onItemClick Callback for item click events.
+ */
+export function useRegisterItemClickHandlers(onItemClick) {
+  const {
+    instance
+  } = useChartContext();
+  const svgRef = useSvgRef();
+  const store = 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 = getSVGPoint(element, point);
+      if (!instance.isPointInside(svgPoint.x, svgPoint.y)) {
+        return;
+      }
+      const item = 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/esm/ChartContainer/ChartContainer.js

@@ -95,6 +95,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.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.arrayOf(PropTypes.shape({
+    dataIndex: PropTypes.any,
+    seriesId: PropTypes.shape({
+      toLocaleString: PropTypes.func.isRequired,
+      toString: PropTypes.func.isRequired,
+      valueOf: PropTypes.func.isRequired
+    }),
+    type: PropTypes.object.isRequired
+  })),
   /**
    * The controlled axis highlight.
    * Identified by the axis id, and data index.
@@ -139,6 +168,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.func,
+  /**
+   * Callback fired when any hidden identifiers change.
+   * @param {VisibilityIdentifier[]} hiddenItems The new list of hidden identifiers.
+   */
+  onHiddenItemsChange: PropTypes.func,
   /**
    * The callback fired when the highlighted item changes.
    *

package/esm/ChartContainer/useChartContainerProps.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import { DEFAULT_PLUGINS } from "../internals/plugins/allPlugins.js";
 export const useChartContainerProps = (props, ref) => {
   const _ref = props,
@@ -39,7 +39,9 @@ export const useChartContainerProps = (props, ref) => {
       slotProps,
       experimentalFeatures,
       enableKeyboardNavigation,
-      brushConfig
+      brushConfig,
+      onHiddenItemsChange,
+      hiddenItems
     } = _ref,
     other = _objectWithoutPropertiesLoose(_ref, _excluded);
   const chartsSurfaceProps = _extends({
@@ -75,6 +77,8 @@ export const useChartContainerProps = (props, ref) => {
     experimentalFeatures,
     enableKeyboardNavigation,
     brushConfig,
+    onHiddenItemsChange,
+    hiddenItems,
     plugins: plugins ?? DEFAULT_PLUGINS,
     slots,
     slotProps

package/esm/ChartsLegend/ChartsLegend.js

@@ -82,7 +82,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
     children: data.items.map((item, i) => {
       return /*#__PURE__*/_jsx("li", {
         className: classes?.item,
-        "data-series": item.id,
+        "data-series": item.seriesId,
         children: /*#__PURE__*/_jsxs(Element, {
           className: classes?.series,
           role: onItemClick ? 'button' : undefined,
@@ -99,7 +99,7 @@ const ChartsLegend = consumeSlots('MuiChartsLegend', 'legend', {
             children: item.label
           })]
         })
-      }, item.id);
+      }, `${item.seriesId}-${item.dataIndex}`);
     })
   }));
 }));

package/esm/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/esm/ChartsLegend/onClickContextBuilder.js

@@ -3,5 +3,6 @@ export const seriesContextBuilder = context => ({
   color: context.color,
   label: context.label,
   seriesId: context.seriesId,
-  itemId: context.itemId
+  itemId: context.itemId,
+  dataIndex: context.dataIndex
 });

package/esm/ChartsOverlay/ChartsLoadingOverlay.js

@@ -7,7 +7,10 @@ import { styled } from '@mui/material/styles';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text')(({
+const StyledText = styled('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => _extends({}, theme.typography.body2, {
   stroke: 'none',

package/esm/ChartsOverlay/ChartsNoDataOverlay.js

@@ -7,7 +7,10 @@ import { styled } from '@mui/material/styles';
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { useChartsLocalization } from "../hooks/useChartsLocalization.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const StyledText = styled('text')(({
+const StyledText = styled('text', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => _extends({}, theme.typography.body2, {
   stroke: 'none',

package/esm/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/esm/ChartsReferenceLine/common.js

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

package/esm/ChartsTooltip/ChartsTooltipContainer.js

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["trigger", "position", "anchor", "classes", "children"];
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import useLazyRef from '@mui/utils/useLazyRef';
@@ -21,7 +22,7 @@ import { selectorChartsInteractionPolarAxisTooltip } from "../internals/plugins/
 import { useAxisSystem } from "../hooks/useAxisSystem.js";
 import { useSvgRef } from "../hooks/index.js";
 import { selectorBrushShouldPreventTooltip } from "../internals/plugins/featurePlugins/useChartBrush/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const selectorReturnFalse = () => false;
 const selectorReturnNull = () => null;
 function getIsOpenSelector(trigger, axisSystem, shouldPreventBecauseOfBrush) {
@@ -72,6 +73,7 @@ function ChartsTooltipContainer(inProps) {
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const svgRef = useSvgRef();
+  const anchorRef = React.useRef(null);
   const classes = useUtilityClasses(propClasses);
   const pointerType = usePointerType();
   const isFineMainPointer = useIsFineMainPointer();
@@ -93,18 +95,11 @@ function ChartsTooltipContainer(inProps) {
       return () => {};
     }
     if (itemPosition !== null) {
-      const positionUpdate = 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 = rafThrottle((x, y) => {
+      // eslint-disable-next-line react-compiler/react-compiler
       positionRef.current = {
         x,
         y
@@ -124,7 +119,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,
@@ -166,16 +161,25 @@ function ChartsTooltipContainer(inProps) {
   if (trigger === 'none') {
     return null;
   }
-  return /*#__PURE__*/_jsx(NoSsr, {
-    children: isOpen && /*#__PURE__*/_jsx(ChartsTooltipRoot, _extends({}, 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__*/_jsxs(React.Fragment, {
+    children: [svgRef.current && /*#__PURE__*/ReactDOM.createPortal(/*#__PURE__*/_jsx("rect", {
+      ref: anchorRef,
+      display: "hidden"
+    }), svgRef.current), /*#__PURE__*/_jsx(NoSsr, {
+      children: isOpen && /*#__PURE__*/_jsx(ChartsTooltipRoot, _extends({}, 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/esm/Gauge/GaugeContainer.js

@@ -11,7 +11,10 @@ import { GaugeProvider } from "./GaugeProvider.js";
 import { ChartProvider } from "../context/ChartProvider/index.js";
 import { defaultizeMargin } from "../internals/defaultizeMargin.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const GStyled = styled('g')(({
+const GStyled = styled('g', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})(({
   theme
 }) => ({
   '& text': {

package/esm/LineChart/AnimatedLine.js

@@ -24,9 +24,12 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const animateProps = useAnimateLine(_extends({}, props, {
+  const animateProps = useAnimateLine({
+    d: props.d,
+    skipAnimation,
     ref
-  }));
+  });
+  const fadedOpacity = ownerState.isFaded ? 0.3 : 1;
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
@@ -36,7 +39,7 @@ const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props,
       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
@@ -54,6 +57,7 @@ process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
     classes: PropTypes.object,
     color: PropTypes.string.isRequired,
     gradientId: PropTypes.string,
+    hidden: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
     isFaded: PropTypes.bool.isRequired,
     isHighlighted: PropTypes.bool.isRequired

package/esm/LineChart/AppearingMask.js

@@ -8,7 +8,10 @@ import { cleanId } from "../internals/cleanId.js";
 import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const appearingMaskClasses = generateUtilityClasses('MuiAppearingMask', ['animate']);
-const AnimatedRect = styled('rect')({
+const AnimatedRect = styled('rect', {
+  slot: 'internal',
+  shouldForwardProp: undefined
+})({
   animationName: 'animate-width',
   animationTimingFunction: ANIMATION_TIMING_FUNCTION,
   animationDuration: '0s',

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