@mui/x-charts 8.0.0-beta.2 → 8.0.0-beta.3

package/modern/ChartsXAxis/ChartsXAxis.js

@@ -111,7 +111,7 @@ function getVisibleLabels(xTicks, {
     return true;
   }));
 }
-function shortenLabels(visibleLabels, drawingArea, maxHeight, tickLabelStyle) {
+function shortenLabels(visibleLabels, drawingArea, maxHeight, isRtl, tickLabelStyle) {
   const shortenedLabels = new Map();
   const angle = clampAngle(tickLabelStyle?.angle ?? 0);
 
@@ -132,6 +132,9 @@ function shortenLabels(visibleLabels, drawingArea, maxHeight, tickLabelStyle) {
   if (angle > 90 && angle < 270) {
     [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
   }
+  if (isRtl) {
+    [leftBoundFactor, rightBoundFactor] = [rightBoundFactor, leftBoundFactor];
+  }
   for (const item of visibleLabels) {
     if (item.formattedValue) {
       // That maximum width of the tick depends on its proximity to the axis bounds.
@@ -293,7 +296,7 @@ function ChartsXAxis(inProps) {
 
   /* If there's an axis title, the tick labels have less space to render  */
   const tickLabelsMaxHeight = Math.max(0, axisHeight - (label ? labelHeight + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
-  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
+  const tickLabels = isHydrated ? shortenLabels(visibleLabels, drawingArea, tickLabelsMaxHeight, isRtl, axisTickLabelProps.style) : new Map(Array.from(visibleLabels).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/_jsxs(XAxisRoot, {
     transform: `translate(0, ${position === 'bottom' ? top + height + offset : top - offset})`,
     className: classes.root,

package/modern/ChartsYAxis/ChartsYAxis.js

@@ -9,6 +9,9 @@ import useSlotProps from '@mui/utils/useSlotProps';
 import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, styled, useTheme } from '@mui/material/styles';
 import { useRtl } from '@mui/system/RtlProvider';
+import { useIsHydrated } from "../hooks/useIsHydrated.js";
+import { getDefaultBaseline, getDefaultTextAnchor } from "../ChartsText/defaultTextPlacement.js";
+import { doesTextFitInRect, ellipsize } from "../internals/ellipsize.js";
 import { getStringSize } from "../internals/domUtils.js";
 import { useTicks } from "../hooks/useTicks.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
@@ -19,6 +22,8 @@ import { isInfinity } from "../internals/isInfinity.js";
 import { isBandScale } from "../internals/isBandScale.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
 import { useYAxes } from "../hooks/index.js";
+import { clampAngle } from "../internals/clampAngle.js";
+import { invertTextAnchor } from "../internals/invertTextAnchor.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -35,6 +40,47 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAxisUtilityClass, classes);
 };
+
+/* Gap between a tick and its label. */
+const TICK_LABEL_GAP = 2;
+/* Gap between the axis label and tick labels. */
+const AXIS_LABEL_TICK_LABEL_GAP = 2;
+function shortenLabels(visibleLabels, drawingArea, maxWidth, isRtl, tickLabelStyle) {
+  const shortenedLabels = new Map();
+  const angle = clampAngle(tickLabelStyle?.angle ?? 0);
+  let topBoundFactor = 1;
+  let bottomBoundFactor = 1;
+  if (tickLabelStyle?.textAnchor === 'start') {
+    topBoundFactor = Infinity;
+    bottomBoundFactor = 1;
+  } else if (tickLabelStyle?.textAnchor === 'end') {
+    topBoundFactor = 1;
+    bottomBoundFactor = Infinity;
+  } else {
+    topBoundFactor = 2;
+    bottomBoundFactor = 2;
+  }
+  if (angle > 180) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  if (isRtl) {
+    [topBoundFactor, bottomBoundFactor] = [bottomBoundFactor, topBoundFactor];
+  }
+  for (const item of visibleLabels) {
+    if (item.formattedValue) {
+      // That maximum height of the tick depends on its proximity to the axis bounds.
+      const height = Math.min((item.offset + item.labelOffset) * topBoundFactor, (drawingArea.top + drawingArea.height + drawingArea.bottom - item.offset - item.labelOffset) * bottomBoundFactor);
+      const doesTextFit = text => doesTextFitInRect(text, {
+        width: maxWidth,
+        height,
+        angle,
+        measureText: string => getStringSize(string, tickLabelStyle)
+      });
+      shortenedLabels.set(item, ellipsize(item.formattedValue.toString(), doesTextFit));
+    }
+  }
+  return shortenedLabels;
+}
 const YAxisRoot = styled(AxisRoot, {
   name: 'MuiChartsYAxis',
   slot: 'Root',
@@ -92,16 +138,18 @@ function ChartsYAxis(inProps) {
   } = defaultizedProps;
   const theme = useTheme();
   const isRtl = useRtl();
+  const isHydrated = useIsHydrated();
   const classes = useUtilityClasses(defaultizedProps);
   const {
     instance
   } = useChartContext();
+  const drawingArea = useDrawingArea();
   const {
     left,
     top,
     width,
     height
-  } = useDrawingArea();
+  } = drawingArea;
   const tickSize = disableTicks ? 4 : tickSizeProp;
   const yTicks = useTicks({
     scale: yScale,
@@ -117,15 +165,16 @@ function ChartsYAxis(inProps) {
   const Tick = slots?.axisTick ?? 'line';
   const TickLabel = slots?.axisTickLabel ?? ChartsText;
   const Label = slots?.axisLabel ?? ChartsText;
-  const revertAnchor = !isRtl && position === 'right' || isRtl && position !== 'right';
+  const defaultTextAnchor = getDefaultTextAnchor((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
+  const defaultDominantBaseline = getDefaultBaseline((position === 'right' ? -90 : 90) - (tickLabelStyle?.angle ?? 0));
   const axisTickLabelProps = useSlotProps({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
       style: _extends({}, theme.typography.caption, {
         fontSize: tickFontSize,
-        textAnchor: revertAnchor ? 'start' : 'end',
-        dominantBaseline: 'central'
+        textAnchor: isRtl ? invertTextAnchor(defaultTextAnchor) : defaultTextAnchor,
+        dominantBaseline: defaultDominantBaseline
       }, tickLabelStyle)
     },
     className: classes.tickLabel,
@@ -140,7 +189,7 @@ function ChartsYAxis(inProps) {
         fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
-        dominantBaseline: 'auto'
+        dominantBaseline: 'text-before-edge'
       }, labelStyle)
     },
     ownerState: {}
@@ -163,11 +212,13 @@ function ChartsYAxis(inProps) {
   if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity) || position === 'none') {
     return null;
   }
-  const labelHeight = label ? getStringSize(label, axisLabelProps.style).height : 0;
   const labelRefPoint = {
-    x: positionSign * (axisWidth - labelHeight),
+    x: positionSign * axisWidth,
     y: top + height / 2
   };
+  /* If there's an axis title, the tick labels have less space to render  */
+  const tickLabelsMaxWidth = Math.max(0, axisWidth - (label ? getStringSize(label, axisLabelProps.style).height + AXIS_LABEL_TICK_LABEL_GAP : 0) - tickSize - TICK_LABEL_GAP);
+  const tickLabels = isHydrated ? shortenLabels(yTicks, drawingArea, tickLabelsMaxWidth, isRtl, axisTickLabelProps.style) : new Map(Array.from(yTicks).map(item => [item, item.formattedValue]));
   return /*#__PURE__*/_jsxs(YAxisRoot, {
     transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,
@@ -176,13 +227,13 @@ function ChartsYAxis(inProps) {
       y1: top,
       y2: top + height,
       className: classes.line
-    }, lineSlotProps)), yTicks.map(({
-      formattedValue,
-      offset: tickOffset,
-      labelOffset,
-      value
-    }, index) => {
-      const xTickLabel = positionSign * (tickSize + 2);
+    }, lineSlotProps)), yTicks.map((item, index) => {
+      const {
+        offset: tickOffset,
+        labelOffset,
+        value
+      } = item;
+      const xTickLabel = positionSign * (tickSize + TICK_LABEL_GAP);
       const yTickLabel = labelOffset;
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       const showLabel = instance.isPointInside({
@@ -191,6 +242,7 @@ function ChartsYAxis(inProps) {
       }, {
         direction: 'y'
       });
+      const tickLabel = tickLabels.get(item);
       if (!showLabel) {
         return null;
       }
@@ -200,13 +252,13 @@ function ChartsYAxis(inProps) {
         children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
           x2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), tickLabel !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
           x: xTickLabel,
           y: yTickLabel,
-          text: formattedValue.toString()
+          text: tickLabel
         }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/_jsx("g", {
+    }), label && isHydrated && /*#__PURE__*/_jsx("g", {
       className: classes.label,
       children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
         text: label

package/modern/LineChart/AnimatedArea.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["d", "skipAnimation", "ownerState"];
+const _excluded = ["skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, useTransition } from '@react-spring/web';
-import { useStringInterpolator } from "../internals/useStringInterpolator.js";
+import { useAnimateArea } from "../hooks/animation/useAnimateArea.js";
 import { AppearingMask } from "./AppearingMask.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -21,38 +20,22 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 function AnimatedArea(props) {
   const {
-      d,
       skipAnimation,
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const stringInterpolator = useStringInterpolator(d);
-  const transitionChange = useTransition([stringInterpolator], {
-    from: skipAnimation ? undefined : {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    enter: {
-      value: 1
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
+  const animatedProps = useAnimateArea(props);
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-area-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
-      // @ts-expect-error
-      d: style.value.to(interpolator),
+    children: /*#__PURE__*/_jsx("path", _extends({
       fill: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       filter:
       // eslint-disable-next-line no-nested-ternary
       ownerState.isHighlighted ? 'brightness(140%)' : ownerState.gradientId ? undefined : 'brightness(120%)',
       opacity: ownerState.isFaded ? 0.3 : 1,
       stroke: "none"
-    }, other)))
+    }, other, animatedProps))
   });
 }
 process.env.NODE_ENV !== "production" ? AnimatedArea.propTypes = {

package/modern/LineChart/AnimatedLine.d.ts

@@ -19,8 +19,5 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
  *
  * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
  */
-declare function AnimatedLine(props: AnimatedLineProps): React.JSX.Element;
-declare namespace AnimatedLine {
-  var propTypes: any;
-}
+declare const AnimatedLine: React.ForwardRefExoticComponent<AnimatedLineProps & React.RefAttributes<SVGPathElement>>;
 export { AnimatedLine };

package/modern/LineChart/AnimatedLine.js

@@ -2,11 +2,10 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["d", "skipAnimation", "ownerState"];
+const _excluded = ["skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { animated, useTransition } from '@react-spring/web';
-import { useStringInterpolator } from "../internals/useStringInterpolator.js";
+import { useAnimateLine } from "../hooks/index.js";
 import { AppearingMask } from "./AppearingMask.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -19,42 +18,28 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * - [AnimatedLine API](https://mui.com/x/api/charts/animated-line/)
  */
-function AnimatedLine(props) {
+const AnimatedLine = /*#__PURE__*/React.forwardRef(function AnimatedLine(props, ref) {
   const {
-      d,
       skipAnimation,
       ownerState
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const stringInterpolator = useStringInterpolator(d);
-  const transitionChange = useTransition([stringInterpolator], {
-    from: skipAnimation ? undefined : {
-      value: 0
-    },
-    to: {
-      value: 1
-    },
-    enter: {
-      value: 1
-    },
-    reset: false,
-    immediate: skipAnimation
-  });
+  const animateProps = useAnimateLine(_extends({}, props, {
+    ref
+  }));
   return /*#__PURE__*/_jsx(AppearingMask, {
     skipAnimation: skipAnimation,
     id: `${ownerState.id}-line-clip`,
-    children: transitionChange((style, interpolator) => /*#__PURE__*/_jsx(animated.path, _extends({
-      // @ts-expect-error
-      d: style.value.to(interpolator),
+    children: /*#__PURE__*/_jsx("path", _extends({
       stroke: ownerState.gradientId ? `url(#${ownerState.gradientId})` : ownerState.color,
       strokeWidth: 2,
       strokeLinejoin: "round",
       fill: "none",
       filter: ownerState.isHighlighted ? 'brightness(120%)' : undefined,
       opacity: ownerState.isFaded ? 0.3 : 1
-    }, other)))
+    }, other, animateProps))
   });
-}
+});
 process.env.NODE_ENV !== "production" ? AnimatedLine.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/modern/LineChart/AppearingMask.d.ts

@@ -5,6 +5,11 @@ interface AppearingMaskProps {
   skipAnimation?: boolean;
   children: React.ReactNode;
 }
+export interface AppearingMaskClasses {
+  /** Styles applied if the element should be animated. */
+  animate: string;
+}
+export declare const appearingMaskClasses: AppearingMaskClasses;
 /**
  * @ignore - internal component.
  */

package/modern/LineChart/AppearingMask.js

@@ -1,40 +1,45 @@
 'use client';
 
 import * as React from 'react';
-import { animated, useTransition } from '@react-spring/web';
+import { styled } from '@mui/material/styles';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import clsx from 'clsx';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 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')({
+  animationName: 'animate-width',
+  animationTimingFunction: ANIMATION_TIMING_FUNCTION,
+  animationDuration: '0s',
+  [`&.${appearingMaskClasses.animate}`]: {
+    animationDuration: `${ANIMATION_DURATION_MS}ms`
+  },
+  '@keyframes animate-width': {
+    from: {
+      width: 0
+    }
+  }
+});
+
 /**
  * @ignore - internal component.
  */
 export function AppearingMask(props) {
   const drawingArea = useDrawingArea();
   const chartId = useChartId();
-  const transitionAppear = useTransition([drawingArea], {
-    from: props.skipAnimation ? undefined : v => ({
-      animatedWidth: v.left
-    }),
-    enter: v => ({
-      animatedWidth: v.width + v.left + v.right
-    }),
-    leave: v => ({
-      animatedWidth: v.width + v.left + v.right
-    }),
-    reset: false,
-    immediate: props.skipAnimation
-  });
   const clipId = cleanId(`${chartId}-${props.id}`);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx("clipPath", {
       id: clipId,
-      children: transitionAppear(style => /*#__PURE__*/_jsx(animated.rect, {
-        // @ts-expect-error
+      children: /*#__PURE__*/_jsx(AnimatedRect, {
+        className: clsx(!props.skipAnimation && appearingMaskClasses.animate),
         x: 0,
         y: 0,
-        width: style.animatedWidth,
+        width: drawingArea.left + drawingArea.width + drawingArea.right,
         height: drawingArea.top + drawingArea.height + drawingArea.bottom
-      }))
+      })
     }), /*#__PURE__*/_jsx("g", {
       clipPath: `url(#${clipId})`,
       children: props.children

package/modern/LineChart/CircleMarkElement.js

@@ -5,15 +5,23 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTheme } from '@mui/material/styles';
-import { animated, useSpringValue } from '@react-spring/web';
+import { styled, useTheme } from '@mui/material/styles';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { useUtilityClasses } from "./markElementClasses.js";
+import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const Circle = styled('circle')({
+  [`&.${markElementClasses.animate}`]: {
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionProperty: 'cx, cy',
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
+  }
+});
+
 /**
  * The line mark element that only render circle for performance improvement.
  *
@@ -51,33 +59,19 @@ function CircleMarkElement(props) {
     seriesId: id
   });
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const cx = useSpringValue(x, {
-    immediate: skipAnimation
-  });
-  const cy = useSpringValue(y, {
-    immediate: skipAnimation
-  });
-  React.useEffect(() => {
-    cy.start(y, {
-      immediate: skipAnimation
-    });
-    cx.start(x, {
-      immediate: skipAnimation
-    });
-  }, [cy, y, cx, x, skipAnimation]);
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
     isFaded,
-    color
+    color,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
-    // @ts-expect-error
-    cx: cx,
-    cy: cy,
+  return /*#__PURE__*/_jsx(Circle, _extends({}, other, {
+    cx: x,
+    cy: y,
     r: 5,
     fill: (theme.vars || theme).palette.background.paper,
     stroke: color,

package/modern/LineChart/LineChart.js

@@ -238,6 +238,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     height: PropTypes.number,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),
@@ -293,6 +294,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    ignoreTooltip: PropTypes.bool,
     label: PropTypes.string,
     labelStyle: PropTypes.object,
     max: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number]),

package/modern/LineChart/LineHighlightPlot.js

@@ -13,7 +13,7 @@ import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 import { useLineSeriesContext } from "../hooks/useLineSeries.js";
 import getColor from "./seriesConfig/getColor.js";
 import { useChartContext } from "../context/ChartProvider/index.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
 import { useXAxes, useYAxes } from "../hooks/useAxis.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -45,9 +45,8 @@ function LineHighlightPlot(props) {
     instance
   } = useChartContext();
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const highlightedIndex = xAxisIdentifier?.index;
-  if (highlightedIndex === undefined) {
+  const highlightedIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
+  if (highlightedIndex === null) {
     return null;
   }
   if (seriesData === undefined) {

package/modern/LineChart/MarkElement.js

@@ -7,16 +7,16 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
-import { animated, to, useSpringValue } from '@react-spring/web';
+import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js";
 import { getSymbol } from "../internals/getSymbol.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../hooks/useItemHighlighted.js";
-import { useUtilityClasses } from "./markElementClasses.js";
-import { selectorChartsInteractionXAxis } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { selectorChartsInteractionXAxisIndex } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { markElementClasses, useUtilityClasses } from "./markElementClasses.js";
 import { useSelector } from "../internals/store/useSelector.js";
 import { useStore } from "../internals/store/useStore.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const MarkElementPath = styled(animated.path, {
+const MarkElementPath = styled('path', {
   name: 'MuiMarkElement',
   slot: 'Root',
   overridesResolver: (_, styles) => styles.root
@@ -26,7 +26,12 @@ const MarkElementPath = styled(animated.path, {
 }) => ({
   fill: (theme.vars || theme).palette.background.paper,
   stroke: ownerState.color,
-  strokeWidth: 2
+  strokeWidth: 2,
+  [`&.${markElementClasses.animate}`]: {
+    transitionDuration: `${ANIMATION_DURATION_MS}ms`,
+    transitionProperty: 'transform, transform-origin',
+    transitionTimingFunction: ANIMATION_TIMING_FUNCTION
+  }
 }));
 /**
  * Demos:
@@ -63,37 +68,22 @@ function MarkElement(props) {
     seriesId: id
   });
   const store = useStore();
-  const xAxisIdentifier = useSelector(store, selectorChartsInteractionXAxis);
-  const cx = useSpringValue(x, {
-    immediate: skipAnimation
-  });
-  const cy = useSpringValue(y, {
-    immediate: skipAnimation
-  });
-  React.useEffect(() => {
-    cy.start(y, {
-      immediate: skipAnimation
-    });
-    cx.start(x, {
-      immediate: skipAnimation
-    });
-  }, [cy, y, cx, x, skipAnimation]);
+  const xAxisInteractionIndex = useSelector(store, selectorChartsInteractionXAxisIndex);
   const ownerState = {
     id,
     classes: innerClasses,
-    isHighlighted: xAxisIdentifier?.index === dataIndex || isHighlighted,
+    isHighlighted: xAxisInteractionIndex === dataIndex || isHighlighted,
     isFaded,
-    color
+    color,
+    skipAnimation
   };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(MarkElementPath, _extends({}, other, {
     style: {
-      transform: to([cx, cy], (pX, pY) => `translate(${pX}px, ${pY}px)`),
-      transformOrigin: to([cx, cy], (pX, pY) => `${pX}px ${pY}px`)
+      transform: `translate(${x}px, ${y}px)`,
+      transformOrigin: `${x}px ${y}px`
     },
-    ownerState: ownerState
-    // @ts-expect-error
-    ,
+    ownerState: ownerState,
     className: classes.root,
     d: d3Symbol(d3SymbolsFill[getSymbol(shape)])(),
     onClick: onClick,
@@ -117,7 +107,6 @@ process.env.NODE_ENV !== "production" ? MarkElement.propTypes = {
   shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
   /**
    * If `true`, animations are skipped.
-   * @default false
    */
   skipAnimation: PropTypes.bool
 } : void 0;

package/modern/LineChart/MarkPlot.js

@@ -164,7 +164,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   onItemClick: PropTypes.func,
   /**
    * If `true`, animations are skipped.
-   * @default false
    */
   skipAnimation: PropTypes.bool,
   /**

package/modern/LineChart/markElementClasses.d.ts

@@ -6,6 +6,8 @@ export interface MarkElementClasses {
   highlighted: string;
   /** Styles applied to the root element when faded. */
   faded: string;
+  /** Styles applied to the root element when animation is not skipped. */
+  animate: string;
 }
 export type MarkElementClassKey = keyof MarkElementClasses;
 export interface MarkElementOwnerState {
@@ -14,6 +16,7 @@ export interface MarkElementOwnerState {
   isFaded: boolean;
   isHighlighted: boolean;
   classes?: Partial<MarkElementClasses>;
+  skipAnimation?: boolean;
 }
 export declare function getMarkElementUtilityClass(slot: string): string;
 export declare const markElementClasses: MarkElementClasses;

package/modern/LineChart/markElementClasses.js

@@ -4,16 +4,17 @@ import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 export function getMarkElementUtilityClass(slot) {
   return generateUtilityClass('MuiMarkElement', slot);
 }
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded', 'animate']);
 export const useUtilityClasses = ownerState => {
   const {
     classes,
     id,
     isFaded,
-    isHighlighted
+    isHighlighted,
+    skipAnimation
   } = ownerState;
   const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded', skipAnimation ? undefined : 'animate']
   };
   return composeClasses(slots, getMarkElementUtilityClass, classes);
 };