@mui/x-charts 7.15.0 → 7.17.0

package/modern/LineChart/AreaPlot.js

@@ -1,94 +1,101 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { area as d3Area } from '@mui/x-charts-vendor/d3-shape';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { AreaElement } from './AreaElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { useChartGradient } from '../internals/components/ChartsAxesGradients';
-import { useLineSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { AreaElement } from "./AreaElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import getCurveFactory from "../internals/getCurve.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
+import { useLineSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
-  if (seriesData === undefined) {
-    return [];
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  return stackingGroups.flatMap(({
-    ids: groupIds
-  }) => {
-    return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
-    .map(seriesId => {
-      const {
-        xAxisId: xAxisIdProp,
-        yAxisId: yAxisIdProp,
-        xAxisKey = defaultXAxisId,
-        yAxisKey = defaultYAxisId,
-        stackedData,
-        data,
-        connectNulls,
-        baseline
-      } = series[seriesId];
-      const xAxisId = xAxisIdProp ?? xAxisKey;
-      const yAxisId = yAxisIdProp ?? yAxisKey;
-      const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-      const yScale = yAxis[yAxisId].scale;
-      const xData = xAxis[xAxisId].data;
-      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
-      if (process.env.NODE_ENV !== 'production') {
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-        }
-        if (xData.length < stackedData.length) {
-          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-        }
-      }
-      const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
-        if (typeof baseline === 'number') {
-          return yScale(baseline);
-        }
-        if (baseline === 'max') {
-          return yScale.range()[1];
-        }
-        if (baseline === 'min') {
-          return yScale.range()[0];
-        }
-        const value = d.y && yScale(d.y[0]);
-        if (Number.isNaN(value)) {
-          return yScale.range()[0];
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    return stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return [...groupIds].reverse() // Revert stacked area for a more pleasant animation
+      .map(seriesId => {
+        const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
         }
-        return value;
-      }).y1(d => d.y && yScale(d.y[1]));
-      const curve = getCurveFactory(series[seriesId].curve);
-      const formattedData = xData?.map((x, index) => ({
-        x,
-        y: stackedData[index]
-      })) ?? [];
-      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-      const d = areaPath.curve(curve)(d3Data) || '';
-      return _extends({}, series[seriesId], {
-        gradientUsed,
-        d,
-        seriesId
+        const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+          if (typeof baseline === 'number') {
+            return yScale(baseline);
+          }
+          if (baseline === 'max') {
+            return yScale.range()[1];
+          }
+          if (baseline === 'min') {
+            return yScale.range()[0];
+          }
+          const value = d.y && yScale(d.y[0]);
+          if (Number.isNaN(value)) {
+            return yScale.range()[0];
+          }
+          return value;
+        }).y1(d => d.y && yScale(d.y[1]));
+        const curve = getCurveFactory(series[seriesId].curve);
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = areaPath.curve(curve)(d3Data) || '';
+        return _extends({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
       });
     });
-  });
+  }, [seriesData, axisData]);
+  return allData;
 };
 
 /**

package/modern/LineChart/CircleMarkElement.js

@@ -0,0 +1,107 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { warnOnce } from '@mui/x-internals/warning';
+import { animated, useSpring } from '@react-spring/web';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+function CircleMarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      dataIndex,
+      onClick,
+      skipAnimation,
+      shape
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (shape !== 'circle') {
+    warnOnce([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
+  }
+  const theme = useTheme();
+  const getInteractionItemProps = useInteractionItemProps();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const position = useSpring({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
+    cx: position.x,
+    cy: position.y,
+    r: 5,
+    fill: (theme.vars || theme).palette.background.paper,
+    stroke: color,
+    strokeWidth: 2,
+    className: classes.root,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: PropTypes.number.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { CircleMarkElement };

package/modern/LineChart/LineChart.js

@@ -1,21 +1,23 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
-import { AreaPlot } from './AreaPlot';
-import { LinePlot } from './LinePlot';
-import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
-import { MarkPlot } from './MarkPlot';
-import { ChartsAxis } from '../ChartsAxis/ChartsAxis';
-import { ChartsTooltip } from '../ChartsTooltip';
-import { ChartsLegend } from '../ChartsLegend';
-import { ChartsAxisHighlight } from '../ChartsAxisHighlight';
-import { ChartsClipPath } from '../ChartsClipPath';
-import { LineHighlightPlot } from './LineHighlightPlot';
-import { ChartsGrid } from '../ChartsGrid';
-import { ChartsOnAxisClickHandler } from '../ChartsOnAxisClickHandler';
-import { ChartsOverlay } from '../ChartsOverlay';
-import { useLineChartProps } from './useLineChartProps';
+import { AreaPlot } from "./AreaPlot.js";
+import { LinePlot } from "./LinePlot.js";
+import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { MarkPlot } from "./MarkPlot.js";
+import { ChartsAxis } from "../ChartsAxis/ChartsAxis.js";
+import { ChartsTooltip } from "../ChartsTooltip/index.js";
+import { ChartsLegend } from "../ChartsLegend/index.js";
+import { ChartsAxisHighlight } from "../ChartsAxisHighlight/index.js";
+import { ChartsClipPath } from "../ChartsClipPath/index.js";
+import { LineHighlightPlot } from "./LineHighlightPlot.js";
+import { ChartsGrid } from "../ChartsGrid/index.js";
+import { ChartsOnAxisClickHandler } from "../ChartsOnAxisClickHandler/index.js";
+import { ChartsOverlay } from "../ChartsOverlay/index.js";
+import { useLineChartProps } from "./useLineChartProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Demos:
@@ -52,7 +54,7 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(inProps, ref)
   return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
-    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
+    children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(AreaPlot, _extends({}, areaPlotProps)), /*#__PURE__*/_jsx(LinePlot, _extends({}, linePlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
     })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
       "data-drawing-container": true,
@@ -102,6 +104,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -133,6 +139,18 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     classes: PropTypes.object,
     direction: PropTypes.oneOf(['column', 'row']),
     hidden: PropTypes.bool,
+    itemGap: PropTypes.number,
+    itemMarkHeight: PropTypes.number,
+    itemMarkWidth: PropTypes.number,
+    labelStyle: PropTypes.object,
+    markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
+    padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      bottom: PropTypes.number,
+      left: PropTypes.number,
+      right: PropTypes.number,
+      top: PropTypes.number
+    })]),
     position: PropTypes.shape({
       horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
       vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired

package/modern/LineChart/LineElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];
@@ -7,9 +9,9 @@ import composeClasses from '@mui/utils/composeClasses';
 import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { AnimatedLine } from './AnimatedLine';
-import { useItemHighlighted } from '../context';
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { AnimatedLine } from "./AnimatedLine.js";
+import { useItemHighlighted } from "../context/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getLineElementUtilityClass(slot) {
   return generateUtilityClass('MuiLineElement', slot);

package/modern/LineChart/LineHighlightElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color"];

package/modern/LineChart/LineHighlightPlot.js

@@ -1,16 +1,18 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { LineHighlightElement } from './LineHighlightElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import { InteractionContext } from '../context/InteractionProvider';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import getColor from './getColor';
-import { useLineSeries } from '../hooks/useSeries';
-import { useDrawingArea } from '../hooks/useDrawingArea';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { LineHighlightElement } from "./LineHighlightElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import getColor from "./getColor.js";
+import { useLineSeries } from "../hooks/useSeries.js";
+import { useDrawingArea } from "../hooks/useDrawingArea.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:

package/modern/LineChart/LinePlot.js

@@ -1,76 +1,83 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { line as d3Line } from '@mui/x-charts-vendor/d3-shape';
-import { useCartesianContext } from '../context/CartesianProvider';
-import { LineElement } from './LineElement';
-import { getValueToPositionMapper } from '../hooks/useScale';
-import getCurveFactory from '../internals/getCurve';
-import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { useChartGradient } from '../internals/components/ChartsAxesGradients';
-import { useLineSeries } from '../hooks/useSeries';
+import { useCartesianContext } from "../context/CartesianProvider/index.js";
+import { LineElement } from "./LineElement.js";
+import { getValueToPositionMapper } from "../hooks/useScale.js";
+import getCurveFactory from "../internals/getCurve.js";
+import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
+import { useChartGradient } from "../internals/components/ChartsAxesGradients/index.js";
+import { useLineSeries } from "../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useAggregatedData = () => {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
-  if (seriesData === undefined) {
-    return [];
-  }
-  const {
-    series,
-    stackingGroups
-  } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
-  const defaultXAxisId = xAxisIds[0];
-  const defaultYAxisId = yAxisIds[0];
-  return stackingGroups.flatMap(({
-    ids: groupIds
-  }) => {
-    return groupIds.flatMap(seriesId => {
-      const {
-        xAxisId: xAxisIdProp,
-        yAxisId: yAxisIdProp,
-        xAxisKey = defaultXAxisId,
-        yAxisKey = defaultYAxisId,
-        stackedData,
-        data,
-        connectNulls
-      } = series[seriesId];
-      const xAxisId = xAxisIdProp ?? xAxisKey;
-      const yAxisId = yAxisIdProp ?? yAxisKey;
-      const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
-      const yScale = yAxis[yAxisId].scale;
-      const xData = xAxis[xAxisId].data;
-      const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
-      if (process.env.NODE_ENV !== 'production') {
-        if (xData === undefined) {
-          throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
-        }
-        if (xData.length < stackedData.length) {
-          throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const {
+      xAxis,
+      yAxis,
+      xAxisIds,
+      yAxisIds
+    } = axisData;
+    const defaultXAxisId = xAxisIds[0];
+    const defaultYAxisId = yAxisIds[0];
+    return stackingGroups.flatMap(({
+      ids: groupIds
+    }) => {
+      return groupIds.flatMap(seriesId => {
+        const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
+          xAxisKey = defaultXAxisId,
+          yAxisKey = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls
+        } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
+        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X: ${xAxisId === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisId}"`} should have data property to be able to display a line plot.`);
+          }
+          if (xData.length < stackedData.length) {
+            throw new Error(`MUI X: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
         }
-      }
-      const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-      const formattedData = xData?.map((x, index) => ({
-        x,
-        y: stackedData[index]
-      })) ?? [];
-      const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-      const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
-      return _extends({}, series[seriesId], {
-        gradientUsed,
-        d,
-        seriesId
+        const linePath = d3Line().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
+        const formattedData = xData?.map((x, index) => ({
+          x,
+          y: stackedData[index]
+        })) ?? [];
+        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
+        const d = linePath.curve(getCurveFactory(series[seriesId].curve))(d3Data) || '';
+        return _extends({}, series[seriesId], {
+          gradientUsed,
+          d,
+          seriesId
+        });
       });
     });
-  });
+  }, [seriesData, axisData]);
+  return allData;
 };
 
 /**

package/modern/LineChart/MarkElement.js

@@ -1,35 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
-import { getSymbol } from '../internals/getSymbol';
-import { InteractionContext } from '../context/InteractionProvider';
-import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
-import { useItemHighlighted } from '../context';
+import { getSymbol } from "../internals/getSymbol.js";
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
-}
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',