@mui/x-charts 8.0.0-alpha.7 → 8.0.0-alpha.9

package/node/LineChart/LinePlot.js

@@ -13,14 +13,15 @@ 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 _CartesianProvider = require("../context/CartesianProvider");
 var _LineElement = require("./LineElement");
 var _useScale = require("../hooks/useScale");
 var _getCurve = _interopRequireDefault(require("../internals/getCurve"));
+var _isBandScale = require("../internals/isBandScale");
 var _constants = require("../constants");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
 var _useSeries = require("../hooks/useSeries");
 var _AnimationProvider = require("../context/AnimationProvider");
+var _useChartGradientId = require("../hooks/useChartGradientId");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 const LinePlotRoot = (0, _styles.styled)('g', {
@@ -34,7 +35,15 @@ const LinePlotRoot = (0, _styles.styled)('g', {
 });
 const useAggregatedData = () => {
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
+  const getGradientId = (0, _useChartGradientId.useChartGradientIdBuilder)();
 
   // This memo prevents odd line chart behavior when hydrating.
   const allData = React.useMemo(() => {
@@ -45,12 +54,6 @@ const useAggregatedData = () => {
       series,
       stackingGroups
     } = seriesData;
-    const {
-      xAxis,
-      yAxis,
-      xAxisIds,
-      yAxisIds
-    } = axisData;
     const defaultXAxisId = xAxisIds[0];
     const defaultYAxisId = yAxisIds[0];
     return stackingGroups.flatMap(({
@@ -62,12 +65,15 @@ const useAggregatedData = () => {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          connectNulls
+          connectNulls,
+          curve,
+          strictStepCurve
         } = series[seriesId];
-        const xScale = (0, _useScale.getValueToPositionMapper)(xAxis[xAxisId].scale);
+        const xScale = xAxis[xAxisId].scale;
+        const xPosition = (0, _useScale.getValueToPositionMapper)(xScale);
         const yScale = yAxis[yAxisId].scale;
         const xData = xAxis[xAxisId].data;
-        const gradientUsed = yAxis[yAxisId].colorScale && [yAxisId, 'y'] || xAxis[xAxisId].colorScale && [xAxisId, 'x'] || undefined;
+        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: ${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.`);
@@ -76,21 +82,51 @@ const useAggregatedData = () => {
             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 = (0, _d3Shape.line)().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y(d => yScale(d.y[1]));
-        const formattedData = xData?.map((x, index) => ({
-          x,
-          y: stackedData[index]
-        })) ?? [];
-        const d3Data = connectNulls ? formattedData.filter((_, i) => data[i] != null) : formattedData;
-        const d = linePath.curve((0, _getCurve.default)(series[seriesId].curve))(d3Data) || '';
+        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.default)(curve))(d3Data) || '';
         return (0, _extends2.default)({}, series[seriesId], {
-          gradientUsed,
+          gradientId,
           d,
           seriesId
         });
       });
     });
-  }, [seriesData, axisData]);
+  }, [seriesData, xAxisIds, yAxisIds, xAxis, yAxis, getGradientId]);
   return allData;
 };
 
@@ -113,20 +149,19 @@ function LinePlot(props) {
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
-  const getGradientId = (0, _ChartsAxesGradients.useChartGradient)();
   const completedData = useAggregatedData();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinePlotRoot, (0, _extends2.default)({}, other, {
     children: completedData.map(({
       d,
       seriesId,
       color,
-      gradientUsed
+      gradientId
     }) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineElement.LineElement, {
         id: seriesId,
         d: d,
         color: color,
-        gradientId: gradientUsed && getGradientId(...gradientUsed),
+        gradientId: gradientId,
         skipAnimation: skipAnimation,
         slots: slots,
         slotProps: slotProps,

package/node/LineChart/MarkPlot.js

@@ -13,17 +13,17 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _constants = require("../constants");
 var _AnimationProvider = require("../context/AnimationProvider");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _useChartId = require("../hooks/useChartId");
-var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useScale = require("../hooks/useScale");
 var _useSeries = require("../hooks/useSeries");
 var _cleanId = require("../internals/cleanId");
 var _CircleMarkElement = require("./CircleMarkElement");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _MarkElement = require("./MarkElement");
+var _ChartProvider = require("../context/ChartProvider");
+var _hooks = require("../hooks");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
 /**
  * Demos:
  *
@@ -39,16 +39,23 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation: inSkipAnimation,
-      onItemClick,
-      experimentalRendering
+      onItemClick
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const skipAnimation = (0, _AnimationProvider.useSkipAnimation)(inSkipAnimation);
   const seriesData = (0, _useSeries.useLineSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   const chartId = (0, _useChartId.useChartId)();
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
-  const Mark = slots?.mark ?? (experimentalRendering ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   if (seriesData === undefined) {
     return null;
   }
@@ -56,12 +63,6 @@ function MarkPlot(props) {
     series,
     stackingGroups
   } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", (0, _extends2.default)({}, other, {
@@ -74,7 +75,8 @@ function MarkPlot(props) {
           yAxisId = defaultYAxisId,
           stackedData,
           data,
-          showMark = true
+          showMark = true,
+          shape = 'circle'
         } = series[seriesId];
         if (showMark === false) {
           return null;
@@ -88,6 +90,7 @@ function MarkPlot(props) {
         const clipId = (0, _cleanId.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
 
         const colorGetter = (0, _getColor.default)(series[seriesId], xAxis[xAxisId], yAxis[yAxisId]);
+        const Mark = slots?.mark ?? (shape === 'circle' ? _CircleMarkElement.CircleMarkElement : _MarkElement.MarkElement);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
           clipPath: `url(#${clipId})`,
           children: xData?.map((x, index) => {
@@ -110,7 +113,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!drawingArea.isPointInside({
+            if (!instance.isPointInside({
               x,
               y
             })) {
@@ -135,7 +138,7 @@ function MarkPlot(props) {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(Mark, (0, _extends2.default)({
               id: seriesId,
               dataIndex: index,
-              shape: "circle",
+              shape: shape,
               color: colorGetter(index),
               x: x,
               y: y // Don't know why TS doesn't get from the filter that y can't be null
@@ -158,12 +161,6 @@ process.env.NODE_ENV !== "production" ? MarkPlot.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true` the mark element will only be able to render circle.
-   * Giving fewer customization options, but saving around 40ms per 1.000 marks.
-   * @default false
-   */
-  experimentalRendering: _propTypes.default.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/node/LineChart/formatter.js

@@ -56,7 +56,9 @@ const formatter = (params, dataset) => {
     .order(stackingOrder).offset(stackingOffset)(d3Dataset);
     ids.forEach((id, index) => {
       const dataKey = series[id].dataKey;
-      completedSeries[id] = (0, _extends2.default)({}, series[id], {
+      completedSeries[id] = (0, _extends2.default)({
+        labelMarkType: 'line'
+      }, series[id], {
         data: dataKey ? dataset.map(data => {
           const value = data[dataKey];
           if (typeof value !== 'number') {

package/node/LineChart/legend.js

@@ -16,7 +16,7 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
-      markType: series[seriesId].labelMarkType ?? 'line',
+      markType: series[seriesId].labelMarkType,
       id: seriesId,
       seriesId,
       color: series[seriesId].color,

package/node/LineChart/plugin.js

@@ -8,10 +8,11 @@ exports.plugin = void 0;
 var _extremums = require("./extremums");
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
 const plugin = exports.plugin = {
-  seriesType: 'line',
   colorProcessor: _getColor.default,
-  seriesFormatter: _formatter.default,
+  seriesProcessor: _formatter.default,
+  legendGetter: _legend.default,
   xExtremumGetter: _extremums.getExtremumX,
   yExtremumGetter: _extremums.getExtremumY
 };

package/node/LineChart/useLineChartProps.js

@@ -11,7 +11,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
 var _calculateMargins = require("../internals/calculateMargins");
-const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className", "experimentalMarkRendering"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "hideLegend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -49,8 +49,7 @@ const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className,
-      experimentalMarkRendering
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
@@ -111,8 +110,7 @@ const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation,
-    experimentalRendering: experimentalMarkRendering
+    skipAnimation
   };
   const overlayProps = {
     slots,

package/node/PieChart/PieArcLabelPlot.js

@@ -72,7 +72,7 @@ function PieArcLabelPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, _transition.defaultLabelTransitionConfig, {
+  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultLabelTransitionConfig)(skipAnimation), {
     immediate: skipAnimation
   }));
   if (data.length === 0) {

package/node/PieChart/PieArcPlot.js

@@ -45,7 +45,7 @@ function PieArcPlot(props) {
     faded,
     data
   });
-  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, _transition.defaultTransitionConfig, {
+  const transition = (0, _web.useTransition)(transformedData, (0, _extends2.default)({}, (0, _transition.getDefaultTransitionConfig)(skipAnimation), {
     immediate: skipAnimation
   }));
   if (data.length === 0) {

package/node/PieChart/PieChart.js

@@ -17,7 +17,7 @@ var _ChartsLegend = require("../ChartsLegend");
 var _PiePlot = require("./PiePlot");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsSurface = require("../ChartsSurface");
-var _context = require("../context");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -82,7 +82,7 @@ const PieChart = exports.PieChart = /*#__PURE__*/React.forwardRef(function PieCh
     skipAnimation
   }), ref);
   const Tooltip = slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, {
       legendPosition: props.slotProps?.legend?.position,
       legendDirection: props?.slotProps?.legend?.direction ?? 'vertical',
@@ -112,6 +112,9 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }),
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   /**
@@ -145,6 +148,11 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -154,7 +162,6 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -193,6 +200,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.

package/node/PieChart/dataTransform/transition.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultTransitionConfig = exports.defaultLabelTransitionConfig = void 0;
-const defaultTransitionConfig = exports.defaultTransitionConfig = {
+exports.getDefaultTransitionConfig = exports.getDefaultLabelTransitionConfig = void 0;
+const getDefaultTransitionConfig = skipAnimation => ({
   keys: item => item.id,
-  from: ({
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     cornerRadius,
@@ -70,10 +70,11 @@ const defaultTransitionConfig = exports.defaultTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
-const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
+});
+exports.getDefaultTransitionConfig = getDefaultTransitionConfig;
+const getDefaultLabelTransitionConfig = skipAnimation => ({
   keys: item => item.id,
-  from: ({
+  from: skipAnimation ? undefined : ({
     innerRadius,
     outerRadius,
     arcLabelRadius,
@@ -140,4 +141,5 @@ const defaultLabelTransitionConfig = exports.defaultLabelTransitionConfig = {
     friction: 14,
     clamp: true
   }
-};
+});
+exports.getDefaultLabelTransitionConfig = getDefaultLabelTransitionConfig;

package/node/PieChart/formatter.js

@@ -32,11 +32,14 @@ const formatter = params => {
   seriesOrder.forEach(seriesId => {
     const arcs = (0, _d3Shape.pie)().startAngle(2 * Math.PI * (series[seriesId].startAngle ?? 0) / 360).endAngle(2 * Math.PI * (series[seriesId].endAngle ?? 360) / 360).padAngle(2 * Math.PI * (series[seriesId].paddingAngle ?? 0) / 360).sortValues(getSortingComparator(series[seriesId].sortingValues ?? 'none'))(series[seriesId].data.map(piePoint => piePoint.value));
     defaultizedSeries[seriesId] = (0, _extends2.default)({
+      labelMarkType: 'circle',
       valueFormatter: item => item.value.toLocaleString()
     }, series[seriesId], {
       data: series[seriesId].data.map((item, index) => (0, _extends2.default)({}, item, {
         id: item.id ?? `auto-generated-pie-id-${seriesId}-${index}`
-      }, arcs[index])).map((item, index) => (0, _extends2.default)({}, item, {
+      }, arcs[index])).map((item, index) => (0, _extends2.default)({
+        labelMarkType: 'circle'
+      }, item, {
         formattedValue: series[seriesId].valueFormatter?.((0, _extends2.default)({}, item, {
           label: (0, _getLabel.getLabel)(item.label, 'arc')
         }), {

package/node/PieChart/legend.js

@@ -17,7 +17,7 @@ const legendGetter = params => {
         return;
       }
       acc.push({
-        markType: item.labelMarkType ?? series[seriesId].labelMarkType ?? 'circle',
+        markType: series[seriesId].labelMarkType,
         id: item.id,
         seriesId,
         color: item.color,

package/node/PieChart/plugin.js

@@ -7,8 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.plugin = void 0;
 var _formatter = _interopRequireDefault(require("./formatter"));
 var _getColor = _interopRequireDefault(require("./getColor"));
+var _legend = _interopRequireDefault(require("./legend"));
 const plugin = exports.plugin = {
-  seriesType: 'pie',
   colorProcessor: _getColor.default,
-  seriesFormatter: _formatter.default
+  seriesProcessor: _formatter.default,
+  legendGetter: _legend.default
 };

package/node/ScatterChart/Scatter.js

@@ -15,8 +15,8 @@ var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _useStore = require("../internals/store/useStore");
 var _useSelector = require("../internals/store/useSelector");
 var _context = require("../context");
-var _useDrawingArea = require("../hooks/useDrawingArea");
 var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
+var _ChartProvider = require("../context/ChartProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Demos:
@@ -38,7 +38,9 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
+  const {
+    instance
+  } = (0, _ChartProvider.useChartContext)();
   const store = (0, _useStore.useStore)();
   const isVoronoiEnabled = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionIsVoronoiEnabled);
   const skipInteractionHandlers = isVoronoiEnabled || series.disableHover;
@@ -55,7 +57,7 @@ function Scatter(props) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = drawingArea.isPointInside({
+      const isInRange = instance.isPointInside({
         x,
         y
       });
@@ -83,7 +85,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, drawingArea, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
+  }, [xScale, yScale, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color, instance]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,

package/node/ScatterChart/ScatterChart.js

@@ -19,10 +19,9 @@ var _ChartsOverlay = require("../ChartsOverlay");
 var _ChartsAxisHighlight = require("../ChartsAxisHighlight");
 var _ChartsVoronoiHandler = require("../ChartsVoronoiHandler/ChartsVoronoiHandler");
 var _ChartsGrid = require("../ChartsGrid");
-var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
 var _useScatterChartProps = require("./useScatterChartProps");
 var _useChartContainerProps = require("../ChartContainer/useChartContainerProps");
-var _context = require("../context");
+var _ChartDataProvider = require("../ChartDataProvider");
 var _ChartsSurface = require("../ChartsSurface");
 var _ChartsWrapper = require("../internals/components/ChartsWrapper");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -44,7 +43,6 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
   const {
     chartsWrapperProps,
     chartContainerProps,
-    zAxisProps,
     voronoiHandlerProps,
     chartsAxisProps,
     gridProps,
@@ -59,17 +57,15 @@ const ScatterChart = exports.ScatterChart = /*#__PURE__*/React.forwardRef(functi
     chartsSurfaceProps
   } = (0, _useChartContainerProps.useChartContainerProps)(chartContainerProps, ref);
   const Tooltip = props.slots?.tooltip ?? _ChartsTooltip.ChartsTooltip;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsWrapper.ChartsWrapper, (0, _extends2.default)({}, chartsWrapperProps, {
-      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ZAxisContextProvider.ZAxisContextProvider, (0, _extends2.default)({}, zAxisProps, {
-          children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
-            "data-drawing-container": true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
-            trigger: "item"
-          }, props.slotProps?.tooltip)), children]
-        }))
+      children: [!props.hideLegend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
+        children: [!props.disableVoronoi && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVoronoiHandler.ChartsVoronoiHandler, (0, _extends2.default)({}, voronoiHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
+          "data-drawing-container": true,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScatterPlot.ScatterPlot, (0, _extends2.default)({}, scatterPlotProps))
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, (0, _extends2.default)({
+          trigger: "item"
+        }, props.slotProps?.tooltip)), children]
       }))]
     }))
   }));
@@ -79,6 +75,9 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  apiRef: _propTypes.default.shape({
+    current: _propTypes.default.object
+  }),
   /**
    * The configuration of axes highlight.
    * @see See {@link https://mui.com/x/react-charts/highlighting/ highlighting docs} for more details.
@@ -139,6 +138,11 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     dataIndex: _propTypes.default.number,
     seriesId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
+  /**
+   * This prop is used to help implement the accessibility logic.
+   * If you don't provide this prop. It falls back to a randomly generated id.
+   */
+  id: _propTypes.default.string,
   /**
    * Indicate which axis to display the left of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.
@@ -154,7 +158,6 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
    * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
-   * @default object Depends on the charts type.
    */
   margin: _propTypes.default.shape({
     bottom: _propTypes.default.number,
@@ -201,6 +204,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    */
   slots: _propTypes.default.object,
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  theme: _propTypes.default.oneOf(['dark', 'light']),
   title: _propTypes.default.string,
   /**
    * Indicate which axis to display the top of the charts.

package/node/ScatterChart/ScatterPlot.js

@@ -11,9 +11,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Scatter = require("./Scatter");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
+var _hooks = require("../hooks");
 var _useZAxis = require("../hooks/useZAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -33,11 +33,18 @@ function ScatterPlot(props) {
     onItemClick
   } = props;
   const seriesData = (0, _useSeries.useScatterSeries)();
-  const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    xAxis,
+    xAxisIds
+  } = (0, _hooks.useXAxes)();
+  const {
+    yAxis,
+    yAxisIds
+  } = (0, _hooks.useYAxes)();
   const {
     zAxis,
     zAxisIds
-  } = (0, _useZAxis.useZAxis)();
+  } = (0, _useZAxis.useZAxes)();
   if (seriesData === undefined) {
     return null;
   }
@@ -45,12 +52,6 @@ function ScatterPlot(props) {
     series,
     seriesOrder
   } = seriesData;
-  const {
-    xAxis,
-    yAxis,
-    xAxisIds,
-    yAxisIds
-  } = axisData;
   const defaultXAxisId = xAxisIds[0];
   const defaultYAxisId = yAxisIds[0];
   const defaultZAxisId = zAxisIds[0];