@mui/x-charts 7.11.0 → 7.12.0

package/esm/BarChart/formatter.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { stack as d3Stack } from 'd3-shape';
+import { stack as d3Stack } from '@mui/x-charts-vendor/d3-shape';
 import { getStackingGroups } from '../internals/stackSeries';
 import { defaultizeValueFormatter } from '../internals/defaultizeValueFormatter';
 let warnOnce = false;
@@ -25,7 +25,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined) {
-      throw new Error([`MUI X Charts: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
+      throw new Error([`MUI X: bar series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -52,7 +52,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnOnce && value !== null) {
               warnOnce = true;
-              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.']);
+              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting bars, but contains nonnumerical elements.`, 'Bar plots only support numbers and null values.'].join('\n'));
             }
             return 0;
           }

package/esm/ChartContainer/ChartContainer.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingProvider } from '../context/DrawingProvider';
-import { SeriesContextProvider } from '../context/SeriesContextProvider';
+import { SeriesProvider } from '../context/SeriesProvider';
 import { InteractionProvider } from '../context/InteractionProvider';
 import { ColorProvider } from '../context/ColorProvider';
 import { ChartsSurface } from '../ChartsSurface';
@@ -16,7 +16,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
     children,
     drawingProviderProps,
     colorProviderProps,
-    seriesContextProps,
+    seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,
@@ -24,7 +24,7 @@ const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(pro
   } = useChartContainerProps(props, ref);
   return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
     children: /*#__PURE__*/_jsx(ColorProvider, _extends({}, colorProviderProps, {
-      children: /*#__PURE__*/_jsx(SeriesContextProvider, _extends({}, seriesContextProps, {
+      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
         children: /*#__PURE__*/_jsx(CartesianContextProvider, _extends({}, cartesianContextProps, {
           children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
             children: /*#__PURE__*/_jsx(InteractionProvider, {
@@ -121,7 +121,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -174,7 +173,6 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/ChartContainer/useChartContainerProps.js

@@ -42,7 +42,7 @@ export const useChartContainerProps = (props, ref) => {
   const colorProviderProps = {
     colorProcessors
   };
-  const seriesContextProps = {
+  const seriesProviderProps = {
     series,
     colors,
     dataset,
@@ -76,7 +76,7 @@ export const useChartContainerProps = (props, ref) => {
     children,
     drawingProviderProps,
     colorProviderProps,
-    seriesContextProps,
+    seriesProviderProps,
     cartesianContextProps,
     zAxisContextProps,
     highlightedProviderProps,

package/esm/ChartsAxis/ChartsAxis.js

@@ -57,16 +57,16 @@ function ChartsAxis(props) {
   const topId = getAxisId(topAxis, xAxisIds[0]);
   const rightId = getAxisId(rightAxis, yAxisIds[0]);
   if (topId !== null && !xAxis[topId]) {
-    throw Error([`MUI X Charts: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for top axis "${topId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   if (leftId !== null && !yAxis[leftId]) {
-    throw Error([`MUI X Charts: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for left axis "${leftId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (rightId !== null && !yAxis[rightId]) {
-    throw Error([`MUI X Charts: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for right axis "${rightId}" is not defined.`, `Available ids are: ${yAxisIds.join(', ')}.`].join('\n'));
   }
   if (bottomId !== null && !xAxis[bottomId]) {
-    throw Error([`MUI X Charts: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
+    throw Error([`MUI X: id used for bottom axis "${bottomId}" is not defined.`, `Available ids are: ${xAxisIds.join(', ')}.`].join('\n'));
   }
   const topAxisProps = mergeProps(topAxis, slots, slotProps);
   const bottomAxisProps = mergeProps(bottomAxis, slots, slotProps);

package/esm/ChartsAxisHighlight/ChartsAxisHighlight.js

@@ -74,7 +74,7 @@ function ChartsAxisHighlight(props) {
     const isXError = isBandScaleX && xScale(axisX.value) === undefined;
     const isYError = isBandScaleY && yScale(axisY.value) === undefined;
     if (isXError || isYError) {
-      console.error([`MUI X Charts: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
+      console.error([`MUI X: The position value provided for the axis is not valid for the current scale.`, `This probably means something is wrong with the data passed to the chart.`, `The ChartsAxisHighlight component will not be displayed.`].join('\n'));
     }
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {

package/esm/ChartsLegend/ChartsLegend.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSlotProps } from '@mui/base/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { getSeriesToDisplay } from './utils';
 import { getLegendUtilityClass } from './chartsLegendClasses';

package/esm/ChartsLegend/LegendPerItem.js

@@ -2,7 +2,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["rotate", "dominantBaseline"];
 import * as React from 'react';
-import { NoSsr } from '@mui/base/NoSsr';
+import NoSsr from '@mui/material/NoSsr';
 import { useTheme, styled } from '@mui/material/styles';
 import { ChartsText } from '../ChartsText';
 import { getWordsByLines } from '../internals/getWordsByLines';

package/esm/ChartsOnAxisClickHandler/ChartsOnAxisClickHandler.js

@@ -37,7 +37,9 @@ function ChartsOnAxisClickHandler(props) {
       Object.keys(series).filter(seriesType => ['bar', 'line'].includes(seriesType)).forEach(seriesType => {
         series[seriesType]?.seriesOrder.forEach(seriesId => {
           const seriesItem = series[seriesType].series[seriesId];
-          const axisKey = isXaxis ? seriesItem.xAxisKey : seriesItem.yAxisKey;
+          const providedXAxisId = seriesItem.xAxisId ?? seriesItem.xAxisKey;
+          const providedYAxisId = seriesItem.yAxisId ?? seriesItem.yAxisKey;
+          const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
           if (axisKey === undefined || axisKey === USED_AXIS_ID) {
             seriesValues[seriesId] = seriesItem.data[dataIndex];
           }

package/esm/ChartsReferenceLine/ChartsReferenceLine.js

@@ -10,10 +10,10 @@ function ChartsReferenceLine(props) {
     y
   } = props;
   if (x !== undefined && y !== undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine cannot have both `x` and `y` props set.');
+    throw new Error('MUI X: The ChartsReferenceLine cannot have both `x` and `y` props set.');
   }
   if (x === undefined && y === undefined) {
-    throw new Error('MUI X Charts: The ChartsReferenceLine should have a value in `x` or `y` prop.');
+    throw new Error('MUI X: The ChartsReferenceLine should have a value in `x` or `y` prop.');
   }
   if (x !== undefined) {
     return /*#__PURE__*/_jsx(ChartsXReferenceLine, _extends({}, props));

package/esm/ChartsReferenceLine/ChartsXReferenceLine.js

@@ -5,7 +5,7 @@ import { useDrawingArea, useXScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { buildWarning } from '../internals/warning';
+import { warnOnce } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   top,
@@ -47,7 +47,6 @@ export function getXReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
-const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of x axis with id ${id}.`, 'error');
 function ChartsXReferenceLine(props) {
   const {
     x,
@@ -67,7 +66,7 @@ function ChartsXReferenceLine(props) {
   const xPosition = xAxisScale(x);
   if (xPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      valueError(x, axisId);
+      warnOnce(`MUI X: the value ${x} does not exist in the data of x axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/esm/ChartsReferenceLine/ChartsYReferenceLine.js

@@ -5,7 +5,7 @@ import { useDrawingArea, useYScale } from '../hooks';
 import { ReferenceLineRoot } from './common';
 import { ChartsText } from '../ChartsText';
 import { getReferenceLineUtilityClass } from './chartsReferenceLineClasses';
-import { buildWarning } from '../internals/warning';
+import { warnOnce } from '../internals/warning';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getTextParams = ({
   left,
@@ -47,7 +47,6 @@ export function getYReferenceLineClasses(classes) {
     label: ['label']
   }, getReferenceLineUtilityClass, classes);
 }
-const valueError = buildWarning((value, id) => `MUI X Charts: the value ${value} does not exist in the data of y axis with id ${id}.`, 'error');
 function ChartsYReferenceLine(props) {
   const {
     y,
@@ -67,7 +66,7 @@ function ChartsYReferenceLine(props) {
   const yPosition = yAxisScale(y);
   if (yPosition === undefined) {
     if (process.env.NODE_ENV !== 'production') {
-      valueError(y, axisId);
+      warnOnce(`MUI X: the value ${y} does not exist in the data of y axis with id ${axisId}.`, 'error');
     }
     return null;
   }

package/esm/ChartsTooltip/ChartsAxisTooltipContent.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { DefaultChartsAxisTooltipContent } from './DefaultChartsAxisTooltipContent';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
@@ -40,11 +40,15 @@ function ChartsAxisTooltipContent(props) {
     Object.keys(series).filter(isCartesianSeriesType).forEach(seriesType => {
       series[seriesType].seriesOrder.forEach(seriesId => {
         const item = series[seriesType].series[seriesId];
-        const axisKey = isXaxis ? item.xAxisKey : item.yAxisKey;
+        const providedXAxisId = item.xAxisId ?? item.xAxisKey;
+        const providedYAxisId = item.yAxisId ?? item.yAxisKey;
+        const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
         if (axisKey === undefined || axisKey === USED_AXIS_ID) {
           const seriesToAdd = series[seriesType].series[seriesId];
-          const zAxisKey = seriesToAdd.zAxisKey ?? zAxisIds[0];
-          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[seriesToAdd.xAxisKey ?? xAxisIds[0]], yAxis[seriesToAdd.yAxisKey ?? yAxisIds[0]], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
+          const xAxisId = providedXAxisId ?? xAxisIds[0];
+          const yAxisId = providedYAxisId ?? yAxisIds[0];
+          const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+          const getColor = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
           rep.push(_extends({}, seriesToAdd, {
             getColor
           }));

package/esm/ChartsTooltip/ChartsItemTooltipContent.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { DefaultChartsItemTooltipContent } from './DefaultChartsItemTooltipContent';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { ZAxisContext } from '../context/ZAxisContextProvider';
@@ -30,10 +30,10 @@ function ChartsItemTooltipContent(props) {
     zAxisIds
   } = React.useContext(ZAxisContext);
   const colorProcessors = useColorProcessor();
-  const xAxisKey = series.xAxisKey ?? xAxisIds[0];
-  const yAxisKey = series.yAxisKey ?? yAxisIds[0];
-  const zAxisKey = series.zAxisKey ?? zAxisIds[0];
-  const getColor = colorProcessors[series.type]?.(series, xAxisKey && xAxis[xAxisKey], yAxisKey && yAxis[yAxisKey], zAxisKey && zAxis[zAxisKey]) ?? (() => '');
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  const getColor = colorProcessors[series.type]?.(series, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
   const Content = content ?? DefaultChartsItemTooltipContent;
   const chartTooltipContentProps = useSlotProps({
     elementType: Content,

package/esm/ChartsTooltip/ChartsTooltip.js

@@ -3,9 +3,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled, useThemeProps } from '@mui/material/styles';
-import { Popper } from '@mui/base/Popper';
-import { NoSsr } from '@mui/base/NoSsr';
-import { useSlotProps } from '@mui/base/utils';
+import Popper from '@mui/material/Popper';
+import NoSsr from '@mui/material/NoSsr';
+import useSlotProps from '@mui/utils/useSlotProps';
 import { InteractionContext } from '../context/InteractionProvider';
 import { generateVirtualElement, useMouseTracker, getTooltipHasData } from './utils';
 import { ChartsItemTooltipContent } from './ChartsItemTooltipContent';

package/esm/ChartsVoronoiHandler/ChartsVoronoiHandler.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Delaunay } from 'd3-delaunay';
+import { Delaunay } from '@mui/x-charts-vendor/d3-delaunay';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useCartesianContext } from '../context/CartesianProvider';
@@ -63,11 +63,13 @@ function ChartsVoronoiHandler(props) {
     seriesOrder.forEach(seriesId => {
       const {
         data,
+        xAxisId,
+        yAxisId,
         xAxisKey,
         yAxisKey
       } = series[seriesId];
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       const getXPosition = getValueToPositionMapper(xScale);
       const getYPosition = getValueToPositionMapper(yScale);
       const seriesPoints = data.flatMap(({

package/esm/ChartsXAxis/ChartsXAxis.js

@@ -3,8 +3,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["scale", "tickNumber", "reverse"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSlotProps } from '@mui/base/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';

package/esm/ChartsYAxis/ChartsYAxis.js

@@ -3,8 +3,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["scale", "tickNumber"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useSlotProps } from '@mui/base/utils';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
+import composeClasses from '@mui/utils/composeClasses';
 import { useThemeProps, useTheme } from '@mui/material/styles';
 import { useCartesianContext } from '../context/CartesianProvider';
 import { useTicks } from '../hooks/useTicks';

package/esm/Gauge/GaugeReferenceArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { arc as d3Arc } from 'd3-shape';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
 import { useGaugeState } from './GaugeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/Gauge/GaugeValueArc.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { arc as d3Arc } from 'd3-shape';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { styled } from '@mui/material/styles';
 import { useGaugeState } from './GaugeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/LineChart/AnimatedArea.js

@@ -4,8 +4,8 @@ const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { color as d3Color } from 'd3-color';
 import { animated, useSpring } from '@react-spring/web';
+import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
 import { cleanId } from '../internals/cleanId';
 import { useChartId, useDrawingArea } from '../hooks';

package/esm/LineChart/AnimatedLine.js

@@ -4,7 +4,7 @@ const _excluded = ["d", "skipAnimation", "ownerState"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, useSpring } from '@react-spring/web';
-import { color as d3Color } from 'd3-color';
+import { color as d3Color } from '@mui/x-charts-vendor/d3-color';
 import { styled } from '@mui/material/styles';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
 import { cleanId } from '../internals/cleanId';

package/esm/LineChart/AreaElement.js

@@ -4,7 +4,7 @@ const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';

package/esm/LineChart/AreaPlot.js

@@ -3,7 +3,7 @@ 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 'd3-shape';
+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';
@@ -36,22 +36,26 @@ const useAggregatedData = () => {
     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
       } = series[seriesId];
-      const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      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 Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          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 Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          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 => {

package/esm/LineChart/LineChart.js

@@ -49,7 +49,10 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), props.grid && /*#__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(MarkPlot, _extends({}, markPlotProps)), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx("g", {
+      "data-drawing-container": true,
+      children: /*#__PURE__*/_jsx(MarkPlot, _extends({}, markPlotProps))
+    }), /*#__PURE__*/_jsx(LineHighlightPlot, _extends({}, lineHighlightPlotProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
@@ -237,7 +240,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   xAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -290,7 +292,6 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * An array of [[AxisConfig]] objects.
    */
   yAxis: PropTypes.arrayOf(PropTypes.shape({
-    axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     classes: PropTypes.object,
     colorMap: PropTypes.oneOfType([PropTypes.shape({
       colors: PropTypes.arrayOf(PropTypes.string).isRequired,

package/esm/LineChart/LineElement.js

@@ -4,7 +4,7 @@ const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import { useSlotProps } from '@mui/base/utils';
+import useSlotProps from '@mui/utils/useSlotProps';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';

package/esm/LineChart/LineHighlightPlot.js

@@ -60,20 +60,24 @@ function LineHighlightPlot(props) {
     }) => {
       return groupIds.flatMap(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
           data,
           disableHighlight
         } = series[seriesId];
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
         if (disableHighlight || data[highlightedIndex] == null) {
           return null;
         }
-        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          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.`);
         }
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
@@ -84,7 +88,7 @@ function LineHighlightPlot(props) {
         })) {
           return null;
         }
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/_jsx(Element, _extends({
           id: seriesId,
           color: colorGetter(highlightedIndex),

package/esm/LineChart/LinePlot.js

@@ -3,7 +3,7 @@ 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 'd3-shape';
+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';
@@ -35,22 +35,26 @@ const useAggregatedData = () => {
   }) => {
     return groupIds.flatMap(seriesId => {
       const {
+        xAxisId: xAxisIdProp,
+        yAxisId: yAxisIdProp,
         xAxisKey = defaultXAxisId,
         yAxisKey = defaultYAxisId,
         stackedData,
         data,
         connectNulls
       } = series[seriesId];
-      const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-      const yScale = yAxis[yAxisKey].scale;
-      const xData = xAxis[xAxisKey].data;
-      const gradientUsed = yAxis[yAxisKey].colorScale && [yAxisKey, 'y'] || xAxis[xAxisKey].colorScale && [xAxisKey, 'x'] || undefined;
+      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 Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          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 Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
+          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]));

package/esm/LineChart/MarkElement.js

@@ -7,7 +7,7 @@ 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 'd3-shape';
+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';

package/esm/LineChart/MarkPlot.js

@@ -57,6 +57,8 @@ function MarkPlot(props) {
     }) => {
       return groupIds.map(seriesId => {
         const {
+          xAxisId: xAxisIdProp,
+          yAxisId: yAxisIdProp,
           xAxisKey = defaultXAxisId,
           yAxisKey = defaultYAxisId,
           stackedData,
@@ -66,15 +68,17 @@ function MarkPlot(props) {
         if (showMark === false) {
           return null;
         }
-        const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
-        const yScale = yAxis[yAxisKey].scale;
-        const xData = xAxis[xAxisKey].data;
+        const xAxisId = xAxisIdProp ?? xAxisKey;
+        const yAxisId = yAxisIdProp ?? yAxisKey;
+        const xScale = getValueToPositionMapper(xAxis[xAxisId].scale);
+        const yScale = yAxis[yAxisId].scale;
+        const xData = xAxis[xAxisId].data;
         if (xData === undefined) {
-          throw new Error(`MUI X Charts: ${xAxisKey === DEFAULT_X_AXIS_KEY ? 'The first `xAxis`' : `The x-axis with id "${xAxisKey}"`} should have data property to be able to display a line plot.`);
+          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.`);
         }
         const clipId = cleanId(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
-        const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
+        const colorGetter = getColor(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
         return /*#__PURE__*/_jsx("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {

package/esm/LineChart/extremums.js

@@ -24,7 +24,10 @@ export const getExtremumY = params => {
     axis,
     isDefaultAxis
   } = params;
-  return Object.keys(series).filter(seriesId => series[seriesId].yAxisKey === axis.id || isDefaultAxis && series[seriesId].yAxisKey === undefined).reduce((acc, seriesId) => {
+  return Object.keys(series).filter(seriesId => {
+    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
+  }).reduce((acc, seriesId) => {
     const {
       area,
       stackedData