@mui/x-charts 7.9.0 → 7.11.0

package/esm/Gauge/GaugeProvider.js

@@ -1,6 +1,6 @@
 // @ignore - do not document.
 import * as React from 'react';
-import { getPercentageValue } from '../internals/utils';
+import { getPercentageValue } from '../internals/getPercentageValue';
 import { getArcRatios, getAvailableRadius } from './utils';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";

package/esm/LineChart/AnimatedArea.js

@@ -7,7 +7,7 @@ import { styled } from '@mui/material/styles';
 import { color as d3Color } from 'd3-color';
 import { animated, useSpring } from '@react-spring/web';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/utils';
+import { cleanId } from '../internals/cleanId';
 import { useChartId, useDrawingArea } from '../hooks';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AreaElementPath = styled(animated.path, {

package/esm/LineChart/AnimatedLine.js

@@ -7,7 +7,7 @@ import { animated, useSpring } from '@react-spring/web';
 import { color as d3Color } from 'd3-color';
 import { styled } from '@mui/material/styles';
 import { useAnimatedPath } from '../internals/useAnimatedPath';
-import { cleanId } from '../internals/utils';
+import { cleanId } from '../internals/cleanId';
 import { useChartId } from '../hooks/useChartId';
 import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/LineChart/AreaPlot.js

@@ -54,7 +54,13 @@ const useAggregatedData = () => {
           throw new Error(`MUI X Charts: The data length of the x axis (${xData.length} items) is lower than the length of series (${stackedData.length} items).`);
         }
       }
-      const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => d.y && yScale(d.y[0])).y1(d => d.y && yScale(d.y[1]));
+      const areaPath = d3Area().x(d => xScale(d.x)).defined((_, i) => connectNulls || data[i] != null).y0(d => {
+        const value = d.y && yScale(d.y[0]);
+        if (Number.isNaN(value)) {
+          return yScale.range()[0];
+        }
+        return value;
+      }).y1(d => d.y && yScale(d.y[1]));
       const curve = getCurveFactory(series[seriesId].curve);
       const formattedData = xData?.map((x, index) => ({
         x,

package/esm/LineChart/LineChart.js

@@ -48,8 +48,8 @@ const LineChart = /*#__PURE__*/React.forwardRef(function LineChart(props, ref) {
     ref: 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(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps)), /*#__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]
+      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]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/esm/LineChart/LineHighlightPlot.js

@@ -10,6 +10,7 @@ import { InteractionContext } from '../context/InteractionProvider';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
+import { useDrawingArea } from '../hooks/useDrawingArea';
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -29,6 +30,7 @@ function LineHighlightPlot(props) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const {
     axis
   } = React.useContext(InteractionContext);
@@ -76,6 +78,12 @@ function LineHighlightPlot(props) {
         const x = xScale(xData[highlightedIndex]);
         const y = yScale(stackedData[highlightedIndex][1]); // This should not be undefined since y should not be a band scale
 
+        if (!drawingArea.isPointInside({
+          x,
+          y
+        })) {
+          return null;
+        }
         const colorGetter = getColor(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
         return /*#__PURE__*/_jsx(Element, _extends({
           id: seriesId,

package/esm/LineChart/MarkElement.js

@@ -9,7 +9,7 @@ import { styled } from '@mui/material/styles';
 import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
 import { symbol as d3Symbol, symbolsFill as d3SymbolsFill } from 'd3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
-import { getSymbol } from '../internals/utils';
+import { getSymbol } from '../internals/getSymbol';
 import { InteractionContext } from '../context/InteractionProvider';
 import { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 import { useItemHighlighted } from '../context';

package/esm/LineChart/MarkPlot.js

@@ -8,7 +8,7 @@ import { MarkElement } from './MarkElement';
 import { getValueToPositionMapper } from '../hooks/useScale';
 import { useChartId } from '../hooks/useChartId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
-import { cleanId } from '../internals/utils';
+import { cleanId } from '../internals/cleanId';
 import getColor from './getColor';
 import { useLineSeries } from '../hooks/useSeries';
 import { useDrawingArea } from '../hooks/useDrawingArea';
@@ -34,10 +34,7 @@ function MarkPlot(props) {
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
-  const {
-    left,
-    width
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const Mark = slots?.mark ?? MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -72,19 +69,6 @@ function MarkPlot(props) {
         const xScale = getValueToPositionMapper(xAxis[xAxisKey].scale);
         const yScale = yAxis[yAxisKey].scale;
         const xData = xAxis[xAxisKey].data;
-        const yRange = yScale.range();
-        const isInRange = ({
-          x,
-          y
-        }) => {
-          if (x < left || x > left + width) {
-            return false;
-          }
-          if (y < Math.min(...yRange) || y > Math.max(...yRange)) {
-            return false;
-          }
-          return true;
-        };
         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.`);
         }
@@ -113,7 +97,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!isInRange({
+            if (!drawingArea.isPointInside({
               x,
               y
             })) {

package/esm/LineChart/extremums.js

@@ -30,7 +30,7 @@ export const getExtremumY = params => {
       stackedData
     } = series[seriesId];
     const isArea = area !== undefined;
-    const getValues = isArea ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
+    const getValues = isArea && axis.scaleType !== 'log' ? d => d : d => [d[1], d[1]]; // Since this series is not used to display an area, we do not consider the base (the d[0]).
 
     const seriesExtremums = getSeriesExtremums(getValues, stackedData);
     if (acc[0] === null) {

package/esm/LineChart/formatter.js

@@ -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 charts: your dataset key "${dataKey}" is used for plotting line, but contains nonnumerical elements.`, 'Line plots only support numbers and null values.']);
             }
             return null;
           }

package/esm/LineChart/useLineChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "onAreaClick", "onLineClick", "onMarkClick", "axisHighlight", "disableLineItemHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "highlightedItem", "onHighlightChange", "className"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from '../constants';
 /**
@@ -10,39 +12,41 @@ import { DEFAULT_X_AXIS_KEY } from '../constants';
  */
 export const useLineChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin,
-    colors,
-    dataset,
-    sx,
-    tooltip,
-    onAxisClick,
-    onAreaClick,
-    onLineClick,
-    onMarkClick,
-    axisHighlight,
-    disableLineItemHighlight,
-    legend,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    children,
-    slots,
-    slotProps,
-    skipAnimation,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin,
+      colors,
+      dataset,
+      sx,
+      tooltip,
+      onAxisClick,
+      onAreaClick,
+      onLineClick,
+      onMarkClick,
+      axisHighlight,
+      disableLineItemHighlight,
+      legend,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      children,
+      slots,
+      slotProps,
+      skipAnimation,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
   const clipPathId = `${id}-clip-path`;
-  const chartContainerProps = {
+  const chartContainerProps = _extends({}, other, {
     series: series.map(s => _extends({
       disableHighlight: !!disableLineItemHighlight,
       type: 'line'
@@ -63,8 +67,9 @@ export const useLineChartProps = props => {
     sx,
     highlightedItem,
     onHighlightChange,
-    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick
-  };
+    disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none' && !onAxisClick,
+    className
+  });
   const axisClickHandlerProps = {
     onAxisClick
   };

package/esm/PieChart/PieChart.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "sx", "tooltip", "axisHighlight", "skipAnimation", "legend", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "onItemClick", "loading", "highlightedItem", "onHighlightChange", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveChartContainer } from '../ResponsiveChartContainer';
@@ -34,37 +36,39 @@ const defaultRTLMargin = {
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-function PieChart(props) {
+const PieChart = /*#__PURE__*/React.forwardRef(function PieChart(props, ref) {
   const {
-    xAxis,
-    yAxis,
-    series,
-    width,
-    height,
-    margin: marginProps,
-    colors,
-    sx,
-    tooltip = {
-      trigger: 'item'
-    },
-    axisHighlight = {
-      x: 'none',
-      y: 'none'
-    },
-    skipAnimation,
-    legend: legendProps,
-    topAxis = null,
-    leftAxis = null,
-    rightAxis = null,
-    bottomAxis = null,
-    children,
-    slots,
-    slotProps,
-    onItemClick,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
+      xAxis,
+      yAxis,
+      series,
+      width,
+      height,
+      margin: marginProps,
+      colors,
+      sx,
+      tooltip = {
+        trigger: 'item'
+      },
+      axisHighlight = {
+        x: 'none',
+        y: 'none'
+      },
+      skipAnimation,
+      legend: legendProps,
+      topAxis = null,
+      leftAxis = null,
+      rightAxis = null,
+      bottomAxis = null,
+      children,
+      slots,
+      slotProps,
+      onItemClick,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const isRTL = useIsRTL();
   const margin = _extends({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
   const legend = _extends({
@@ -74,7 +78,8 @@ function PieChart(props) {
       horizontal: isRTL ? 'left' : 'right'
     }
   }, legendProps);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, {
+  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({}, other, {
+    ref: ref,
     series: series.map(s => _extends({
       type: 'pie'
     }, s)),
@@ -92,6 +97,7 @@ function PieChart(props) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
+    className: className,
     children: [/*#__PURE__*/_jsx(ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -115,8 +121,8 @@ function PieChart(props) {
       slots: slots,
       slotProps: slotProps
     })), children]
-  });
-}
+  }));
+});
 process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

package/esm/PieChart/PiePlot.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { DrawingContext } from '../context/DrawingProvider';
 import { PieArcPlot } from './PieArcPlot';
 import { PieArcLabelPlot } from './PieArcLabelPlot';
-import { getPercentageValue } from '../internals/utils';
+import { getPercentageValue } from '../internals/getPercentageValue';
 import { getPieCoordinates } from './getPieCoordinates';
 import { usePieSeries } from '../hooks/useSeries';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/esm/PieChart/getPieCoordinates.js

@@ -1,4 +1,4 @@
-import { getPercentageValue } from '../internals/utils';
+import { getPercentageValue } from '../internals/getPercentageValue';
 export function getPieCoordinates(series, drawing) {
   const {
     height,

package/esm/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,31 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { ChartContainer } from '../ChartContainer';
-import { useChartContainerDimensions } from './useChartContainerDimensions';
 import { ResizableContainer } from './ResizableContainer';
+import { useResponsiveChartContainerProps } from './useResponsiveChartContainerProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
-      width: inWidth,
-      height: inHeight
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [containerRef, width, height] = useChartContainerDimensions(inWidth, inHeight);
-  return /*#__PURE__*/_jsx(ResizableContainer, {
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    children: width && height ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, other, {
-      width: width,
-      height: height,
-      ref: ref
-    })) : null
-  });
+    hasIntrinsicSize,
+    chartContainerProps,
+    resizableChartContainerProps
+  } = useResponsiveChartContainerProps(props, ref);
+  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartContainer, _extends({}, chartContainerProps)) : null
+  }));
 });
 process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -2,8 +2,8 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
 export const useChartContainerDimensions = (inWidth, inHeight) => {
-  const rootRef = React.useRef(null);
   const displayError = React.useRef(false);
+  const rootRef = React.useRef(null);
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
 
@@ -62,5 +62,9 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
       displayError.current = false;
     }
   }
-  return [rootRef, inWidth ?? width, inHeight ?? height];
+  return {
+    containerRef: rootRef,
+    width: inWidth ?? width,
+    height: inHeight ?? height
+  };
 };

package/esm/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+import { useChartContainerDimensions } from './useChartContainerDimensions';
+export const useResponsiveChartContainerProps = (props, ref) => {
+  const {
+      width,
+      height,
+      margin,
+      children,
+      series,
+      colors,
+      dataset,
+      desc,
+      disableAxisListener,
+      highlightedItem,
+      onHighlightChange,
+      plugins,
+      sx,
+      title,
+      viewBox,
+      xAxis,
+      yAxis,
+      zAxis
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = useChartContainerDimensions(width, height);
+  const resizableChartContainerProps = _extends({}, other, {
+    ownerState: {
+      width,
+      height
+    },
+    ref: containerRef
+  });
+  const chartContainerProps = {
+    margin,
+    children,
+    series,
+    colors,
+    dataset,
+    desc,
+    disableAxisListener,
+    highlightedItem,
+    onHighlightChange,
+    plugins,
+    sx,
+    title,
+    viewBox,
+    xAxis,
+    yAxis,
+    zAxis,
+    width: dWidth,
+    height: dHeight,
+    ref
+  };
+  return {
+    hasIntrinsicSize: dWidth && dHeight,
+    chartContainerProps,
+    resizableChartContainerProps
+  };
+};

package/esm/ScatterChart/Scatter.js

@@ -27,10 +27,7 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const {
-    left,
-    width
-  } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const {
     useVoronoiInteraction
   } = React.useContext(InteractionContext);
@@ -43,15 +40,15 @@ function Scatter(props) {
   const cleanData = React.useMemo(() => {
     const getXPosition = getValueToPositionMapper(xScale);
     const getYPosition = getValueToPositionMapper(yScale);
-    const yRange = yScale.range();
-    const minYRange = Math.min(...yRange);
-    const maxYRange = Math.max(...yRange);
     const temp = [];
     for (let i = 0; i < series.data.length; i += 1) {
       const scatterPoint = series.data[i];
       const x = getXPosition(scatterPoint.x);
       const y = getYPosition(scatterPoint.y);
-      const isInRange = x >= left && x <= left + width && y >= minYRange && y <= maxYRange;
+      const isInRange = drawingArea.isPointInside({
+        x,
+        y
+      });
       const pointCtx = {
         type: 'scatter',
         seriesId: series.id,
@@ -76,7 +73,7 @@ function Scatter(props) {
       }
     }
     return temp;
-  }, [xScale, yScale, left, width, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
+  }, [xScale, yScale, drawingArea, series.data, series.id, isHighlighted, isFaded, getInteractionItemProps, colorGetter, color]);
   return /*#__PURE__*/_jsx("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/_jsx("circle", _extends({
       cx: 0,

package/esm/ScatterChart/useScatterChartProps.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["xAxis", "yAxis", "zAxis", "series", "tooltip", "axisHighlight", "voronoiMaxRadius", "disableVoronoi", "legend", "width", "height", "margin", "colors", "sx", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "onItemClick", "children", "slots", "slotProps", "loading", "highlightedItem", "onHighlightChange", "className"];
 /**
  * A helper function that extracts ScatterChartProps from the input props
  * and returns an object with props for the children components of ScatterChart.
@@ -8,34 +10,36 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  */
 export const useScatterChartProps = props => {
   const {
-    xAxis,
-    yAxis,
-    zAxis,
-    series,
-    tooltip,
-    axisHighlight,
-    voronoiMaxRadius,
-    disableVoronoi,
-    legend,
-    width,
-    height,
-    margin,
-    colors,
-    sx,
-    grid,
-    topAxis,
-    leftAxis,
-    rightAxis,
-    bottomAxis,
-    onItemClick,
-    children,
-    slots,
-    slotProps,
-    loading,
-    highlightedItem,
-    onHighlightChange
-  } = props;
-  const chartContainerProps = {
+      xAxis,
+      yAxis,
+      zAxis,
+      series,
+      tooltip,
+      axisHighlight,
+      voronoiMaxRadius,
+      disableVoronoi,
+      legend,
+      width,
+      height,
+      margin,
+      colors,
+      sx,
+      grid,
+      topAxis,
+      leftAxis,
+      rightAxis,
+      bottomAxis,
+      onItemClick,
+      children,
+      slots,
+      slotProps,
+      loading,
+      highlightedItem,
+      onHighlightChange,
+      className
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const chartContainerProps = _extends({}, other, {
     series: series.map(s => _extends({
       type: 'scatter'
     }, s)),
@@ -47,8 +51,9 @@ export const useScatterChartProps = props => {
     yAxis,
     sx,
     highlightedItem,
-    onHighlightChange
-  };
+    onHighlightChange,
+    className
+  });
   const zAxisProps = {
     zAxis
   };