@mui/x-charts 7.9.0 → 7.11.0

package/LineChart/LineChart.js

@@ -57,8 +57,8 @@ const LineChart = exports.LineChart = /*#__PURE__*/React.forwardRef(function Lin
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), props.grid && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps))]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AreaPlot.AreaPlot, (0, _extends2.default)({}, areaPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinePlot.LinePlot, (0, _extends2.default)({}, linePlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOverlay.ChartsOverlay, (0, _extends2.default)({}, overlayProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxisHighlight.ChartsAxisHighlight, (0, _extends2.default)({}, axisHighlightProps))]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MarkPlot.MarkPlot, (0, _extends2.default)({}, markPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LineHighlightPlot.LineHighlightPlot, (0, _extends2.default)({}, lineHighlightPlotProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsLegend.ChartsLegend, (0, _extends2.default)({}, legendProps)), !props.loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltip, (0, _extends2.default)({}, tooltipProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsClipPath.ChartsClipPath, (0, _extends2.default)({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? LineChart.propTypes = {

package/LineChart/LineHighlightPlot.js

@@ -16,6 +16,7 @@ var _InteractionProvider = require("../context/InteractionProvider");
 var _constants = require("../constants");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
+var _useDrawingArea = require("../hooks/useDrawingArea");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -38,6 +39,7 @@ function LineHighlightPlot(props) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     axis
   } = React.useContext(_InteractionProvider.InteractionContext);
@@ -85,6 +87,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 = (0, _getColor.default)(series[seriesId], xAxis[xAxisKey], yAxis[yAxisKey]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({
           id: seriesId,

package/LineChart/MarkElement.js

@@ -17,7 +17,7 @@ var _styles = require("@mui/material/styles");
 var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 var _d3Shape = require("d3-shape");
 var _web = require("@react-spring/web");
-var _utils = require("../internals/utils");
+var _getSymbol = require("../internals/getSymbol");
 var _InteractionProvider = require("../context/InteractionProvider");
 var _useInteractionItemProps = require("../hooks/useInteractionItemProps");
 var _context = require("../context");
@@ -106,7 +106,7 @@ function MarkElement(props) {
     },
     ownerState: ownerState,
     className: classes.root,
-    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _utils.getSymbol)(shape)])(),
+    d: (0, _d3Shape.symbol)(_d3Shape.symbolsFill[(0, _getSymbol.getSymbol)(shape)])(),
     onClick: onClick,
     cursor: onClick ? 'pointer' : 'unset'
   }, getInteractionItemProps({

package/LineChart/MarkPlot.js

@@ -14,7 +14,7 @@ var _MarkElement = require("./MarkElement");
 var _useScale = require("../hooks/useScale");
 var _useChartId = require("../hooks/useChartId");
 var _constants = require("../constants");
-var _utils = require("../internals/utils");
+var _cleanId = require("../internals/cleanId");
 var _getColor = _interopRequireDefault(require("./getColor"));
 var _useSeries = require("../hooks/useSeries");
 var _useDrawingArea = require("../hooks/useDrawingArea");
@@ -43,10 +43,7 @@ function MarkPlot(props) {
   const seriesData = (0, _useSeries.useLineSeries)();
   const axisData = (0, _CartesianProvider.useCartesianContext)();
   const chartId = (0, _useChartId.useChartId)();
-  const {
-    left,
-    width
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const Mark = slots?.mark ?? _MarkElement.MarkElement;
   if (seriesData === undefined) {
     return null;
@@ -81,23 +78,10 @@ function MarkPlot(props) {
         const xScale = (0, _useScale.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 === _constants.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.`);
         }
-        const clipId = (0, _utils.cleanId)(`${chartId}-${seriesId}-line-clip`); // We assume that if displaying line mark, the line will also be rendered
+        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[xAxisKey], yAxis[yAxisKey]);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
@@ -122,7 +106,7 @@ function MarkPlot(props) {
               // Remove missing data point
               return false;
             }
-            if (!isInRange({
+            if (!drawingArea.isPointInside({
               x,
               y
             })) {

package/LineChart/extremums.js

@@ -37,7 +37,7 @@ 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/LineChart/formatter.js

@@ -63,7 +63,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/LineChart/useLineChartProps.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useLineChartProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _constants = require("../constants");
+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"];
 /**
  * A helper function that extracts LineChartProps from the input props
  * and returns an object with props for the children components of LineChart.
@@ -17,39 +19,41 @@ var _constants = require("../constants");
  */
 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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const id = (0, _useId.default)();
   const clipPathId = `${id}-clip-path`;
-  const chartContainerProps = {
+  const chartContainerProps = (0, _extends2.default)({}, other, {
     series: series.map(s => (0, _extends2.default)({
       disableHighlight: !!disableLineItemHighlight,
       type: 'line'
@@ -70,8 +74,9 @@ 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/PieChart/PieChart.d.ts

@@ -75,8 +75,5 @@ export interface PieChartProps extends Omit<ResponsiveChartContainerProps, 'seri
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-declare function PieChart(props: PieChartProps): React.JSX.Element;
-declare namespace PieChart {
-    var propTypes: any;
-}
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<unknown>>;
 export { PieChart };

package/PieChart/PieChart.js

@@ -4,8 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PieChart = PieChart;
+exports.PieChart = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
@@ -18,6 +19,7 @@ var _PiePlot = require("./PiePlot");
 var _useIsRTL = require("../internals/useIsRTL");
 var _ChartsOverlay = require("../ChartsOverlay");
 var _jsxRuntime = require("react/jsx-runtime");
+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"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const defaultMargin = {
@@ -43,37 +45,39 @@ const defaultRTLMargin = {
  *
  * - [PieChart API](https://mui.com/x/api/charts/pie-chart/)
  */
-function PieChart(props) {
+const PieChart = exports.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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const isRTL = (0, _useIsRTL.useIsRTL)();
   const margin = (0, _extends2.default)({}, isRTL ? defaultRTLMargin : defaultMargin, marginProps);
   const legend = (0, _extends2.default)({
@@ -83,7 +87,8 @@ function PieChart(props) {
       horizontal: isRTL ? 'left' : 'right'
     }
   }, legendProps);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({}, other, {
+    ref: ref,
     series: series.map(s => (0, _extends2.default)({
       type: 'pie'
     }, s)),
@@ -101,6 +106,7 @@ function PieChart(props) {
     disableAxisListener: tooltip?.trigger !== 'axis' && axisHighlight?.x === 'none' && axisHighlight?.y === 'none',
     highlightedItem: highlightedItem,
     onHighlightChange: onHighlightChange,
+    className: className,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, {
       topAxis: topAxis,
       leftAxis: leftAxis,
@@ -124,8 +130,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/PieChart/PiePlot.js

@@ -10,7 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _DrawingProvider = require("../context/DrawingProvider");
 var _PieArcPlot = require("./PieArcPlot");
 var _PieArcLabelPlot = require("./PieArcLabelPlot");
-var _utils = require("../internals/utils");
+var _getPercentageValue = require("../internals/getPercentageValue");
 var _getPieCoordinates = require("./getPieCoordinates");
 var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -71,8 +71,8 @@ function PiePlot(props) {
         width,
         height
       });
-      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcPlot.PieArcPlot, {
@@ -114,9 +114,9 @@ function PiePlot(props) {
         width,
         height
       });
-      const outerRadius = (0, _utils.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
-      const innerRadius = (0, _utils.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
-      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _utils.getPercentageValue)(arcLabelRadiusParam, availableRadius);
+      const outerRadius = (0, _getPercentageValue.getPercentageValue)(outerRadiusParam ?? availableRadius, availableRadius);
+      const innerRadius = (0, _getPercentageValue.getPercentageValue)(innerRadiusParam ?? 0, availableRadius);
+      const arcLabelRadius = arcLabelRadiusParam === undefined ? (outerRadius + innerRadius) / 2 : (0, _getPercentageValue.getPercentageValue)(arcLabelRadiusParam, availableRadius);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
         transform: `translate(${left + cx}, ${top + cy})`,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PieArcLabelPlot.PieArcLabelPlot, {

package/PieChart/getPieCoordinates.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPieCoordinates = getPieCoordinates;
-var _utils = require("../internals/utils");
+var _getPercentageValue = require("../internals/getPercentageValue");
 function getPieCoordinates(series, drawing) {
   const {
     height,
@@ -15,8 +15,8 @@ function getPieCoordinates(series, drawing) {
     cy: cyParam
   } = series;
   const availableRadius = Math.min(width, height) / 2;
-  const cx = (0, _utils.getPercentageValue)(cxParam ?? '50%', width);
-  const cy = (0, _utils.getPercentageValue)(cyParam ?? '50%', height);
+  const cx = (0, _getPercentageValue.getPercentageValue)(cxParam ?? '50%', width);
+  const cy = (0, _getPercentageValue.getPercentageValue)(cyParam ?? '50%', height);
   return {
     cx,
     cy,

package/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -6,35 +6,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ResponsiveChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ChartContainer = require("../ChartContainer");
-var _useChartContainerDimensions = require("./useChartContainerDimensions");
 var _ResizableContainer = require("./ResizableContainer");
+var _useResponsiveChartContainerProps = require("./useResponsiveChartContainerProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["width", "height"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ResponsiveChartContainer = exports.ResponsiveChartContainer = /*#__PURE__*/React.forwardRef(function ResponsiveChartContainer(props, ref) {
   const {
-      width: inWidth,
-      height: inHeight
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const [containerRef, width, height] = (0, _useChartContainerDimensions.useChartContainerDimensions)(inWidth, inHeight);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, {
-    ref: containerRef,
-    ownerState: {
-      width: inWidth,
-      height: inHeight
-    },
-    children: width && height ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, other, {
-      width: width,
-      height: height,
-      ref: ref
-    })) : null
-  });
+    hasIntrinsicSize,
+    chartContainerProps,
+    resizableChartContainerProps
+  } = (0, _useResponsiveChartContainerProps.useResponsiveChartContainerProps)(props, ref);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, (0, _extends2.default)({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartContainer.ChartContainer, (0, _extends2.default)({}, chartContainerProps)) : null
+  }));
 });
 process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
   // ----------------------------- Warning --------------------------------

package/ResponsiveChartContainer/useChartContainerDimensions.d.ts

@@ -1,2 +1,6 @@
 import * as React from 'react';
-export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => [React.RefObject<HTMLDivElement>, number, number];
+export declare const useChartContainerDimensions: (inWidth?: number, inHeight?: number) => {
+    containerRef: React.MutableRefObject<null>;
+    width: number;
+    height: number;
+};

package/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -11,8 +11,8 @@ var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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);
 
@@ -71,6 +71,10 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
       displayError.current = false;
     }
   }
-  return [rootRef, inWidth ?? width, inHeight ?? height];
+  return {
+    containerRef: rootRef,
+    width: inWidth ?? width,
+    height: inHeight ?? height
+  };
 };
 exports.useChartContainerDimensions = useChartContainerDimensions;

package/ResponsiveChartContainer/useResponsiveChartContainerProps.d.ts

@@ -0,0 +1,20 @@
+import type { ResponsiveChartContainerProps } from './ResponsiveChartContainer';
+export declare const useResponsiveChartContainerProps: (props: ResponsiveChartContainerProps, ref: React.ForwardedRef<unknown>) => {
+    hasIntrinsicSize: number;
+    chartContainerProps: Omit<import("..").ChartsSurfaceProps & Omit<import("../internals").SeriesContextProviderProps, "seriesFormatters"> & Omit<import("../internals").DrawingProviderProps, "svgRef"> & Pick<import("../internals").CartesianContextProviderProps, "dataset"> & import("..").ZAxisContextProviderProps & import("..").HighlightedProviderProps, "children"> & {
+        xAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsXAxisProps>, "id">[];
+        yAxis?: import("../internals").MakeOptional<import("..").AxisConfig<import("..").ScaleName, any, import("..").ChartsYAxisProps>, "id">[];
+        children?: import("react").ReactNode;
+        plugins?: import("..").ChartsPluginType<import("../internals").ChartSeriesType>[];
+    } & {
+        ref: React.ForwardedRef<unknown>;
+    };
+    resizableChartContainerProps: {
+        ownerState: {
+            width: number | undefined;
+            height: number | undefined;
+        };
+        ref: import("react").MutableRefObject<null>;
+        className?: string;
+    };
+};

package/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveChartContainerProps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _useChartContainerDimensions = require("./useChartContainerDimensions");
+const _excluded = ["width", "height", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
+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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height);
+  const resizableChartContainerProps = (0, _extends2.default)({}, 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
+  };
+};
+exports.useResponsiveChartContainerProps = useResponsiveChartContainerProps;

package/ScatterChart/Scatter.js

@@ -36,10 +36,7 @@ function Scatter(props) {
     markerSize,
     onItemClick
   } = props;
-  const {
-    left,
-    width
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const {
     useVoronoiInteraction
   } = React.useContext(_InteractionProvider.InteractionContext);
@@ -52,15 +49,15 @@ function Scatter(props) {
   const cleanData = React.useMemo(() => {
     const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
     const getYPosition = (0, _useScale.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,
@@ -85,7 +82,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__*/(0, _jsxRuntime.jsx)("g", {
     children: cleanData.map(dataPoint => /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", (0, _extends2.default)({
       cx: 0,