@mui/x-charts 8.6.0 → 8.8.0

package/ChartsTooltip/utils.js

@@ -12,55 +12,44 @@ exports.usePointerType = usePointerType;
 exports.utcFormatter = utcFormatter;
 var React = _interopRequireWildcard(require("react"));
 var _useMediaQuery = _interopRequireDefault(require("@mui/material/useMediaQuery"));
+var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 /**
  * @deprecated We recommend using vanilla JS to let popper track mouse position.
  */
 function useMouseTracker() {
-  const svgRef = (0, _hooks.useSvgRef)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [mousePosition, setMousePosition] = React.useState(null);
   React.useEffect(() => {
-    const element = svgRef.current;
-    if (element === null) {
-      return () => {};
-    }
-    const controller = new AbortController();
-    const handleOut = event => {
-      if (event.pointerType !== 'mouse') {
+    const moveEndHandler = instance.addInteractionListener('moveEnd', event => {
+      if (!event.detail.activeGestures.pan) {
         setMousePosition(null);
       }
-    };
-    const handleMove = event => {
+    });
+    const gestureHandler = event => {
       setMousePosition({
-        x: event.clientX,
-        y: event.clientY,
-        height: event.height,
-        pointerType: event.pointerType
+        x: event.detail.centroid.x,
+        y: event.detail.centroid.y,
+        height: event.detail.srcEvent.height,
+        pointerType: event.detail.srcEvent.pointerType
       });
     };
-    element.addEventListener('pointerdown', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointermove', handleMove, {
-      signal: controller.signal
-    });
-    element.addEventListener('pointerup', handleOut, {
-      signal: controller.signal
-    });
+    const moveHandler = instance.addInteractionListener('move', gestureHandler);
+    const panHandler = instance.addInteractionListener('pan', gestureHandler);
     return () => {
-      // Calling `.abort()` removes ALL event listeners
-      // For more info, see https://kettanaito.com/blog/dont-sleep-on-abort-controller
-      controller.abort();
+      moveHandler.cleanup();
+      panHandler.cleanup();
+      moveEndHandler.cleanup();
     };
-  }, [svgRef]);
+  }, [instance]);
   return mousePosition;
 }
 function usePointerType() {
   const svgRef = (0, _hooks.useSvgRef)();
-
-  // Use a ref to avoid rerendering on every mousemove event.
   const [pointerType, setPointerType] = React.useState(null);
   React.useEffect(() => {
     const element = svgRef.current;

package/Gauge/GaugeContainer.d.ts

@@ -3,7 +3,7 @@ import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
 import { GaugeProviderProps } from "./GaugeProvider.js";
 import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
 import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
-export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
+export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme' | 'experimentalFeatures'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
   children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/LineChart/AreaPlot.js

@@ -7,22 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.AreaPlot = AreaPlot;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _AreaElement = require("./AreaElement");
-var _useScale = require("../hooks/useScale");
-var _getCurve = require("../internals/getCurve");
-var _isBandScale = require("../internals/isBandScale");
-var _constants = require("../constants");
-var _useLineSeries = require("../hooks/useLineSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
-var _useChartGradientId = require("../hooks/useChartGradientId");
 var _useAxis = require("../hooks/useAxis");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useAreaPlotData = require("./useAreaPlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "onItemClick", "skipAnimation"];
 const AreaPlotRoot = (0, _styles.styled)('g', {
@@ -34,117 +28,13 @@ const AreaPlotRoot = (0, _styles.styled)('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = (0, _useAxis.useXAxes)();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = (0, _useAxis.useYAxes)();
-  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    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 = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          baseline,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === _constants.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 Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const areaPath = (0, _d3Shape.area)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).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 d = areaPath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
-        return (0, _extends2.default)({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return (0, _useAreaPlotData.useAreaPlotData)(xAxes, yAxes);
 };
 
 /**

package/LineChart/LineChart.js

@@ -118,6 +118,12 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: _propTypes.default.bool,
+  /**
+   * Options to enable features planned for the next major.
+   */
+  experimentalFeatures: _propTypes.default.shape({
+    preferStrictDomainInLineCharts: _propTypes.default.bool
+  }),
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -133,6 +139,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, the legend is not rendered.
    */
   hideLegend: _propTypes.default.bool,
+  /**
+   * The controlled axis highlight.
+   * Identified by the axis id, and data index.
+   */
+  highlightedAxis: _propTypes.default.arrayOf(_propTypes.default.shape({
+    axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
+    dataIndex: _propTypes.default.number.isRequired
+  })),
   /**
    * The highlighted item.
    * Used when the highlight is controlled.
@@ -184,6 +198,14 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: _propTypes.default.func,
+  /**
+   * The function called when the pointer position corresponds to a new axis data item.
+   * This update can either be caused by a pointer movement, or an axis update.
+   * In case of multiple axes, the function is called if at least one axis is updated.
+   * The argument contains the identifier for all axes with a `data` property.
+   * @param {AxisItemIdentifier[]} axisItems The array of axes item identifiers.
+   */
+  onHighlightedAxisChange: _propTypes.default.func,
   /**
    * Callback fired when a line element is clicked.
    */

package/LineChart/LineHighlightPlot.js

@@ -52,8 +52,8 @@ function LineHighlightPlot(props) {
     instance
   } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
-  const highlightedIndex = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsInteractionXAxisIndex);
-  if (highlightedIndex === null) {
+  const highlightedIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  if (highlightedIndexes.length === 0) {
     return null;
   }
   if (seriesData === undefined) {
@@ -67,7 +67,10 @@ function LineHighlightPlot(props) {
   const defaultYAxisId = yAxisIds[0];
   const Element = slots?.lineHighlight ?? _LineHighlightElement.LineHighlightElement;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
-    children: stackingGroups.flatMap(({
+    children: highlightedIndexes.flatMap(({
+      dataIndex: highlightedIndex,
+      axisId: highlightedAxisId
+    }) => stackingGroups.flatMap(({
       ids: groupIds
     }) => {
       return groupIds.flatMap(seriesId => {
@@ -82,6 +85,9 @@ function LineHighlightPlot(props) {
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
+        if (highlightedAxisId !== xAxisId) {
+          return null;
+        }
         const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
@@ -103,7 +109,7 @@ function LineHighlightPlot(props) {
           shape: shape
         }, slotProps?.lineHighlight), `${seriesId}`);
       });
-    })
+    }))
   }));
 }
 process.env.NODE_ENV !== "production" ? LineHighlightPlot.propTypes = {

package/LineChart/LinePlot.js

@@ -7,23 +7,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LinePlot = LinePlot;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
-var _warning = require("@mui/x-internals/warning");
-var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
 var _LineElement = require("./LineElement");
-var _useScale = require("../hooks/useScale");
-var _getCurve = require("../internals/getCurve");
-var _isBandScale = require("../internals/isBandScale");
-var _constants = require("../constants");
-var _useLineSeries = require("../hooks/useLineSeries");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
-var _useChartGradientId = require("../hooks/useChartGradientId");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useLinePlotData = require("./useLinePlotData");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 const LinePlotRoot = (0, _styles.styled)('g', {
@@ -35,100 +28,13 @@ const LinePlotRoot = (0, _styles.styled)('g', {
   }
 });
 const useAggregatedData = () => {
-  const seriesData = (0, _useLineSeries.useLineSeriesContext)();
   const {
-    xAxis,
-    xAxisIds
+    xAxis: xAxes
   } = (0, _hooks.useXAxes)();
   const {
-    yAxis,
-    yAxisIds
+    yAxis: yAxes
   } = (0, _hooks.useYAxes)();
-  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
-
-  // This memo prevents odd line chart behavior when hydrating.
-  const allData = React.useMemo(() => {
-    if (seriesData === undefined) {
-      return [];
-    }
-    const {
-      series,
-      stackingGroups
-    } = seriesData;
-    const defaultXAxisId = xAxisIds[0];
-    const defaultYAxisId = yAxisIds[0];
-    return stackingGroups.flatMap(({
-      ids: groupIds
-    }) => {
-      return groupIds.flatMap(seriesId => {
-        const {
-          xAxisId = defaultXAxisId,
-          yAxisId = defaultYAxisId,
-          stackedData,
-          data,
-          connectNulls,
-          curve,
-          strictStepCurve
-        } = series[seriesId];
-        const xScale = xAxis[xAxisId].scale;
-        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
-        const yScale = yAxis[yAxisId].scale;
-        const xData = xAxis[xAxisId].data;
-        const gradientId = yAxis[yAxisId].colorScale && getGradientId(yAxisId) || xAxis[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
-        if (process.env.NODE_ENV !== 'production') {
-          if (xData === undefined) {
-            throw new Error(`MUI X Charts: ${xAxisId === _constants.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) {
-            (0, _warning.warnOnce)(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`, 'error');
-          }
-        }
-        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
-        const formattedData = xData?.flatMap((x, index) => {
-          const nullData = data[index] == null;
-          if (shouldExpand) {
-            const rep = [{
-              x,
-              y: stackedData[index],
-              nullData,
-              isExtension: false
-            }];
-            if (!nullData && (index === 0 || data[index - 1] == null)) {
-              rep.unshift({
-                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
-              rep.push({
-                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
-                y: stackedData[index],
-                nullData,
-                isExtension: true
-              });
-            }
-            return rep;
-          }
-          return {
-            x,
-            y: stackedData[index],
-            nullData
-          };
-        }) ?? [];
-        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
-        const linePath = (0, _d3Shape.line)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).y(d => yScale(d.y[1]));
-        const d = linePath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
-        return (0, _extends2.default)({}, series[seriesId], {
-          gradientId,
-          d,
-          seriesId
-        });
-      });
-    });
-  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
-  return allData;
+  return (0, _useLinePlotData.useLinePlotData)(xAxes, yAxes);
 };
 
 /**

package/LineChart/MarkPlot.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
-var _useChartCartesianInteraction = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianInteraction.selectors");
 var _constants = require("../constants");
 var _useSkipAnimation = require("../hooks/useSkipAnimation");
 var _useChartId = require("../hooks/useChartId");
@@ -24,6 +23,7 @@ var _MarkElement = require("./MarkElement");
 var _ChartProvider = require("../context/ChartProvider");
 var _hooks = require("../hooks");
 var _useInternalIsZoomInteracting = require("../internals/plugins/featurePlugins/useChartCartesianAxis/useInternalIsZoomInteracting");
+var _useChartCartesianAxis = require("../internals/plugins/featurePlugins/useChartCartesianAxis");
 var _useSelector = require("../internals/store/useSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
@@ -65,7 +65,21 @@ function MarkPlot(props) {
     isFaded,
     isHighlighted
   } = (0, _hooks.useItemHighlightedGetter)();
-  const xAxisInteractionIndex = (0, _useSelector.useSelector)(store, _useChartCartesianInteraction.selectorChartsInteractionXAxisIndex);
+  const xAxisHighlightIndexes = (0, _useSelector.useSelector)(store, _useChartCartesianAxis.selectorChartsHighlightXAxisIndex);
+  const highlightedItems = React.useMemo(() => {
+    const rep = {};
+    for (const {
+      dataIndex,
+      axisId
+    } of xAxisHighlightIndexes) {
+      if (rep[axisId] === undefined) {
+        rep[axisId] = new Set([dataIndex]);
+      } else {
+        rep[axisId].add(dataIndex);
+      }
+    }
+    return rep;
+  }, [xAxisHighlightIndexes]);
   if (seriesData === undefined) {
     return null;
   }
@@ -163,7 +177,7 @@ function MarkPlot(props) {
                 seriesId,
                 dataIndex: index
               })),
-              isHighlighted: xAxisInteractionIndex === index || isSeriesHighlighted,
+              isHighlighted: highlightedItems[xAxisId]?.has(index) || isSeriesHighlighted,
               isFaded: isSeriesFaded
             }, slotProps?.mark), `${seriesId}-${index}`);
           })

package/LineChart/useAreaPlotData.d.ts

@@ -0,0 +1,12 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface AreaPlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  area?: boolean;
+  gradientId?: string;
+}
+export declare function useAreaPlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): AreaPlotDataPoint[];
+export {};

package/LineChart/useAreaPlotData.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAreaPlotData = useAreaPlotData;
+var React = _interopRequireWildcard(require("react"));
+var _d3Shape = require("@mui/x-charts-vendor/d3-shape");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _isBandScale = require("../internals/isBandScale");
+var _getCurve = require("../internals/getCurve");
+var _hooks = require("../hooks");
+var _constants = require("../constants");
+function useAreaPlotData(xAxes, yAxes) {
+  const seriesData = (0, _hooks.useLineSeriesContext)();
+  const defaultXAxisId = (0, _hooks.useXAxes)().xAxisIds[0];
+  const defaultYAxisId = (0, _hooks.useYAxes)().yAxisIds[0];
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
+
+  // This memo prevents odd line chart behavior when hydrating.
+  const allData = React.useMemo(() => {
+    if (seriesData === undefined) {
+      return [];
+    }
+    const {
+      series,
+      stackingGroups
+    } = seriesData;
+    const areaPlotData = [];
+    for (const stackingGroup of stackingGroups) {
+      const groupIds = stackingGroup.ids;
+      for (let i = groupIds.length - 1; i >= 0; i -= 1) {
+        const seriesId = groupIds[i];
+        const {
+          xAxisId = defaultXAxisId,
+          yAxisId = defaultYAxisId,
+          stackedData,
+          data,
+          connectNulls,
+          baseline,
+          curve,
+          strictStepCurve,
+          area
+        } = series[seriesId];
+        if (!area || !(xAxisId in xAxes) || !(yAxisId in yAxes)) {
+          continue;
+        }
+        const xScale = xAxes[xAxisId].scale;
+        const xPosition = (0, _hooks.getValueToPositionMapper)(xScale);
+        const yScale = yAxes[yAxisId].scale;
+        const xData = xAxes[xAxisId].data;
+        const gradientId = yAxes[yAxisId].colorScale && getGradientId(yAxisId) || xAxes[xAxisId].colorScale && getGradientId(xAxisId) || undefined;
+        if (process.env.NODE_ENV !== 'production') {
+          if (xData === undefined) {
+            throw new Error(`MUI X Charts: ${xAxisId === _constants.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 Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          }
+        }
+        const shouldExpand = curve?.includes('step') && !strictStepCurve && (0, _isBandScale.isBandScale)(xScale);
+        const formattedData = xData?.flatMap((x, index) => {
+          const nullData = data[index] == null;
+          if (shouldExpand) {
+            const rep = [{
+              x,
+              y: stackedData[index],
+              nullData,
+              isExtension: false
+            }];
+            if (!nullData && (index === 0 || data[index - 1] == null)) {
+              rep.unshift({
+                x: (xScale(x) ?? 0) - (xScale.step() - xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            if (!nullData && (index === data.length - 1 || data[index + 1] == null)) {
+              rep.push({
+                x: (xScale(x) ?? 0) + (xScale.step() + xScale.bandwidth()) / 2,
+                y: stackedData[index],
+                nullData,
+                isExtension: true
+              });
+            }
+            return rep;
+          }
+          return {
+            x,
+            y: stackedData[index],
+            nullData
+          };
+        }) ?? [];
+        const d3Data = connectNulls ? formattedData.filter(d => !d.nullData) : formattedData;
+        const areaPath = (0, _d3Shape.area)().x(d => d.isExtension ? d.x : xPosition(d.x)).defined(d => connectNulls || !d.nullData || !!d.isExtension).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 d = areaPath.curve((0, _getCurve.getCurveFactory)(curve))(d3Data) || '';
+        areaPlotData.push({
+          area: series[seriesId].area,
+          color: series[seriesId].color,
+          gradientId,
+          d,
+          seriesId
+        });
+      }
+    }
+    return areaPlotData;
+  }, [seriesData, defaultXAxisId, defaultYAxisId, xAxes, yAxes, getGradientId]);
+  return allData;
+}

package/LineChart/useLinePlotData.d.ts

@@ -0,0 +1,11 @@
+import { ComputedAxisConfig } from "../internals/plugins/featurePlugins/useChartCartesianAxis/index.js";
+import { ChartsXAxisProps, ChartsYAxisProps } from "../models/index.js";
+import { SeriesId } from "../models/seriesType/common.js";
+interface LinePlotDataPoint {
+  d: string;
+  seriesId: SeriesId;
+  color: string;
+  gradientId?: string;
+}
+export declare function useLinePlotData(xAxes: ComputedAxisConfig<ChartsXAxisProps>, yAxes: ComputedAxisConfig<ChartsYAxisProps>): LinePlotDataPoint[];
+export {};