@mui/x-charts 7.11.0 → 7.12.0

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

package/modern/LineChart/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 warnedOnce = false;
@@ -31,7 +31,7 @@ const formatter = (params, dataset) => {
         }
       });
     } else if (dataset === undefined && process.env.NODE_ENV !== 'production') {
-      throw new Error([`MUI X Charts: line 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: line series with id='${id}' has no data.`, 'Either provide a data property to the series or use the dataset prop.'].join('\n'));
     }
   });
   const completedSeries = {};
@@ -56,7 +56,7 @@ const formatter = (params, dataset) => {
           if (typeof value !== 'number') {
             if (process.env.NODE_ENV !== 'production' && !warnedOnce && value !== null) {
               warnedOnce = true;
-              console.error([`MUI X charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
+              console.error([`MUI X: Your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
             }
             return null;
           }

package/modern/PieChart/PieArc.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { arc as d3Arc } from 'd3-shape';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import { animated, to } from '@react-spring/web';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
@@ -73,6 +73,7 @@ function PieArc(props) {
       innerRadius: iR,
       outerRadius: oR
     })),
+    visibility: to([startAngle, endAngle], (sA, eA) => sA === eA ? 'hidden' : 'visible'),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset',
     ownerState: ownerState,

package/modern/PieChart/PieArcLabel.js

@@ -4,7 +4,7 @@ const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingA
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { animated, to } from '@react-spring/web';
-import { arc as d3Arc } from 'd3-shape';
+import { arc as d3Arc } from '@mui/x-charts-vendor/d3-shape';
 import composeClasses from '@mui/utils/composeClasses';
 import generateUtilityClass from '@mui/utils/generateUtilityClass';
 import { styled } from '@mui/material/styles';

package/modern/PieChart/PieChart.js

@@ -284,7 +284,6 @@ process.env.NODE_ENV !== "production" ? PieChart.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,
@@ -337,7 +336,6 @@ process.env.NODE_ENV !== "production" ? PieChart.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/modern/PieChart/formatter.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { pie as d3Pie } from 'd3-shape';
+import { pie as d3Pie } from '@mui/x-charts-vendor/d3-shape';
 import { getLabel } from '../internals/getLabel';
 const getSortingComparator = (comparator = 'none') => {
   if (typeof comparator === 'function') {

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -96,7 +96,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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,
@@ -149,7 +148,6 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.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/modern/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -54,11 +54,11 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
     if (displayError.current && inWidth === undefined && width === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
       displayError.current = false;
     }
     if (displayError.current && inHeight === undefined && height === 0) {
-      console.error(`MUI X Charts: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
+      console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
       displayError.current = false;
     }
   }

package/modern/ScatterChart/ScatterChart.js

@@ -41,7 +41,10 @@ const ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(props,
     ref: ref
   }, chartContainerProps, {
     children: /*#__PURE__*/_jsxs(ZAxisContextProvider, _extends({}, zAxisProps, {
-      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
+      children: [!props.disableVoronoi && /*#__PURE__*/_jsx(ChartsVoronoiHandler, _extends({}, voronoiHandlerProps)), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), props.grid && /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsx("g", {
+        "data-drawing-container": true,
+        children: /*#__PURE__*/_jsx(ScatterPlot, _extends({}, scatterPlotProps))
+      }), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), children]
     }))
   }));
 });
@@ -218,7 +221,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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,
@@ -271,7 +273,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.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/modern/ScatterChart/ScatterPlot.js

@@ -53,12 +53,15 @@ function ScatterPlot(props) {
         xAxisKey,
         yAxisKey,
         zAxisKey,
+        xAxisId,
+        yAxisId,
+        zAxisId,
         markerSize,
         color
       } = series[seriesId];
-      const colorGetter = getColor(series[seriesId], xAxis[xAxisKey ?? defaultXAxisId], yAxis[yAxisKey ?? defaultYAxisId], zAxis[zAxisKey ?? defaultZAxisId]);
-      const xScale = xAxis[xAxisKey ?? defaultXAxisId].scale;
-      const yScale = yAxis[yAxisKey ?? defaultYAxisId].scale;
+      const colorGetter = getColor(series[seriesId], xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId], yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId], zAxis[zAxisId ?? zAxisKey ?? defaultZAxisId]);
+      const xScale = xAxis[xAxisId ?? xAxisKey ?? defaultXAxisId].scale;
+      const yScale = yAxis[yAxisId ?? yAxisKey ?? defaultYAxisId].scale;
       return /*#__PURE__*/_jsx(ScatterItems, _extends({
         xScale: xScale,
         yScale: yScale,