@mui/x-charts 7.16.0 → 7.18.0

package/modern/LineChart/CircleMarkElement.js

@@ -0,0 +1,107 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["x", "y", "id", "classes", "color", "dataIndex", "onClick", "skipAnimation", "shape"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useTheme } from '@mui/material/styles';
+import { warnOnce } from '@mui/x-internals/warning';
+import { animated, useSpring } from '@react-spring/web';
+import { InteractionContext } from "../context/InteractionProvider.js";
+import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
+import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The line mark element that only render circle for performance improvement.
+ *
+ * Demos:
+ *
+ * - [Lines](https://mui.com/x/react-charts/lines/)
+ * - [Line demonstration](https://mui.com/x/react-charts/line-demo/)
+ *
+ * API:
+ *
+ * - [CircleMarkElement API](https://mui.com/x/api/charts/circle-mark-element/)
+ */
+function CircleMarkElement(props) {
+  const {
+      x,
+      y,
+      id,
+      classes: innerClasses,
+      color,
+      dataIndex,
+      onClick,
+      skipAnimation,
+      shape
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  if (shape !== 'circle') {
+    warnOnce([`MUI X: The mark element of your line chart have shape "${shape}" which is not supported when using \`experimentalRendering=true\`.`, 'Only "circle" are supported with `experimentalRendering`.'].join('\n'), 'error');
+  }
+  const theme = useTheme();
+  const getInteractionItemProps = useInteractionItemProps();
+  const {
+    isFaded,
+    isHighlighted
+  } = useItemHighlighted({
+    seriesId: id
+  });
+  const {
+    axis
+  } = React.useContext(InteractionContext);
+  const position = useSpring({
+    to: {
+      x,
+      y
+    },
+    immediate: skipAnimation
+  });
+  const ownerState = {
+    id,
+    classes: innerClasses,
+    isHighlighted: axis.x?.index === dataIndex || isHighlighted,
+    isFaded,
+    color
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /*#__PURE__*/_jsx(animated.circle, _extends({}, other, {
+    cx: position.x,
+    cy: position.y,
+    r: 5,
+    fill: (theme.vars || theme).palette.background.paper,
+    stroke: color,
+    strokeWidth: 2,
+    className: classes.root,
+    onClick: onClick,
+    cursor: onClick ? 'pointer' : 'unset'
+  }, getInteractionItemProps({
+    type: 'line',
+    seriesId: id,
+    dataIndex
+  })));
+}
+process.env.NODE_ENV !== "production" ? CircleMarkElement.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  classes: PropTypes.object,
+  /**
+   * The index to the element in the series' data array.
+   */
+  dataIndex: PropTypes.number.isRequired,
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  /**
+   * The shape of the marker.
+   */
+  shape: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']).isRequired,
+  /**
+   * If `true`, animations are skipped.
+   * @default false
+   */
+  skipAnimation: PropTypes.bool
+} : void 0;
+export { CircleMarkElement };

package/modern/LineChart/LineChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -102,6 +104,10 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * If `true`, render the line highlight item.
    */
   disableLineItemHighlight: PropTypes.bool,
+  /**
+   * If `true` marks will render `<circle />` instead of `<path />` and drop theme override for faster rendering.
+   */
+  experimentalMarkRendering: PropTypes.bool,
   /**
    * Option to display a cartesian grid in the background.
    */
@@ -138,6 +144,7 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,
@@ -193,6 +200,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/LineChart/LineElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "gradientId", "slots", "slotProps", "onClick"];

package/modern/LineChart/LineHighlightElement.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color"];

package/modern/LineChart/LineHighlightPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps"];

package/modern/LineChart/LinePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];

package/modern/LineChart/MarkElement.js

@@ -1,35 +1,19 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["x", "y", "id", "classes", "color", "shape", "dataIndex", "onClick", "skipAnimation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-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 '@mui/x-charts-vendor/d3-shape';
 import { animated, to, useSpring } from '@react-spring/web';
 import { getSymbol } from "../internals/getSymbol.js";
 import { InteractionContext } from "../context/InteractionProvider.js";
 import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js";
 import { useItemHighlighted } from "../context/index.js";
+import { useUtilityClasses } from "./markElementClasses.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getMarkElementUtilityClass(slot) {
-  return generateUtilityClass('MuiMarkElement', slot);
-}
-export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    id,
-    isFaded,
-    isHighlighted
-  } = ownerState;
-  const slots = {
-    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
-  };
-  return composeClasses(slots, getMarkElementUtilityClass, classes);
-};
 const MarkElementPath = styled(animated.path, {
   name: 'MuiMarkElement',
   slot: 'Root',

package/modern/LineChart/MarkPlot.js

@@ -1,6 +1,8 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick"];
+const _excluded = ["slots", "slotProps", "skipAnimation", "onItemClick", "experimentalRendering"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
@@ -12,6 +14,7 @@ import { cleanId } from "../internals/cleanId.js";
 import getColor from "./getColor.js";
 import { useLineSeries } from "../hooks/useSeries.js";
 import { useDrawingArea } from "../hooks/useDrawingArea.js";
+import { CircleMarkElement } from "./CircleMarkElement.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Demos:
@@ -28,14 +31,15 @@ function MarkPlot(props) {
       slots,
       slotProps,
       skipAnimation,
-      onItemClick
+      onItemClick,
+      experimentalRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const seriesData = useLineSeries();
   const axisData = useCartesianContext();
   const chartId = useChartId();
   const drawingArea = useDrawingArea();
-  const Mark = slots?.mark ?? MarkElement;
+  const Mark = slots?.mark ?? (experimentalRendering ? CircleMarkElement : MarkElement);
   if (seriesData === undefined) {
     return null;
   }
@@ -149,6 +153,12 @@ 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.bool,
   /**
    * Callback fired when a line mark item is clicked.
    * @param {React.MouseEvent<SVGPathElement, MouseEvent>} event The event source of the callback.

package/modern/LineChart/index.js

@@ -8,4 +8,5 @@ export * from "./AnimatedArea.js";
 export * from "./LineElement.js";
 export * from "./AnimatedLine.js";
 export * from "./MarkElement.js";
-export * from "./LineHighlightElement.js";
+export * from "./LineHighlightElement.js";
+export { getMarkElementUtilityClass, markElementClasses } from "./markElementClasses.js";

package/modern/LineChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/modern/LineChart/markElementClasses.js

@@ -0,0 +1,19 @@
+import composeClasses from '@mui/utils/composeClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMarkElementUtilityClass(slot) {
+  return generateUtilityClass('MuiMarkElement', slot);
+}
+export const markElementClasses = generateUtilityClasses('MuiMarkElement', ['root', 'highlighted', 'faded']);
+export const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    id,
+    isFaded,
+    isHighlighted
+  } = ownerState;
+  const slots = {
+    root: ['root', `series-${id}`, isHighlighted && 'highlighted', isFaded && 'faded']
+  };
+  return composeClasses(slots, getMarkElementUtilityClass, classes);
+};

package/modern/LineChart/useLineChartProps.js

@@ -1,6 +1,8 @@
+'use client';
+
 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"];
+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", "experimentalMarkRendering"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY } from "../constants/index.js";
 /**
@@ -41,7 +43,8 @@ export const useLineChartProps = props => {
       loading,
       highlightedItem,
       onHighlightChange,
-      className
+      className,
+      experimentalMarkRendering
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const id = useId();
@@ -99,7 +102,8 @@ export const useLineChartProps = props => {
     slots,
     slotProps,
     onItemClick: onMarkClick,
-    skipAnimation
+    skipAnimation,
+    experimentalRendering: experimentalMarkRendering
   };
   const overlayProps = {
     slots,

package/modern/PieChart/PieArc.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["classes", "color", "cornerRadius", "dataIndex", "endAngle", "id", "innerRadius", "isFaded", "isHighlighted", "onClick", "outerRadius", "paddingAngle", "startAngle", "highlightScope"];

package/modern/PieChart/PieArcLabel.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "classes", "color", "startAngle", "endAngle", "paddingAngle", "arcLabelRadius", "innerRadius", "outerRadius", "cornerRadius", "formattedArcLabel", "isHighlighted", "isFaded", "style"];

package/modern/PieChart/PieArcLabelPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["arcLabel", "arcLabelMinAngle", "arcLabelRadius", "cornerRadius", "data", "faded", "highlighted", "id", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation", "slotProps", "slots"],

package/modern/PieChart/PieArcPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["slots", "slotProps", "innerRadius", "outerRadius", "cornerRadius", "paddingAngle", "id", "highlighted", "faded", "data", "onItemClick", "skipAnimation"],

package/modern/PieChart/PieChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 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"];
@@ -197,6 +199,7 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,
@@ -237,6 +240,16 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/PieChart/PiePlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DrawingContext } from "../context/DrawingProvider.js";

package/modern/PieChart/dataTransform/useTransformData.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useHighlighted } from "../../context/index.js";

package/modern/PieChart/legend.js

@@ -11,9 +11,11 @@ const legendGetter = params => {
         return;
       }
       acc.push({
+        id: item.id,
+        seriesId,
         color: item.color,
         label: formattedLabel,
-        id: item.id
+        itemId: item.id
       });
     });
     return acc;

package/modern/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -72,6 +74,16 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: PropTypes.arrayOf(PropTypes.object),
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/modern/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -1,8 +1,14 @@
+'use client';
+
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
-export const useChartContainerDimensions = (inWidth, inHeight) => {
-  const displayError = React.useRef(false);
+export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+  const stateRef = React.useRef({
+    displayError: false,
+    initialCompute: true,
+    computeRun: 0
+  });
   const rootRef = React.useRef(null);
   const [width, setWidth] = React.useState(0);
   const [height, setHeight] = React.useState(0);
@@ -11,7 +17,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
-      return;
+      return {};
     }
     const win = ownerWindow(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
@@ -19,11 +25,31 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     const newWidth = Math.floor(parseFloat(computedStyle.width)) || 0;
     setWidth(newWidth);
     setHeight(newHeight);
+    return {
+      width: newWidth,
+      height: newHeight
+    };
   }, []);
   React.useEffect(() => {
     // Ensure the error detection occurs after the first rendering.
-    displayError.current = true;
+    stateRef.current.displayError = true;
   }, []);
+
+  // This effect is used to compute the size of the container on the initial render.
+  // It is not bound to the raf loop to avoid an unwanted "resize" event.
+  // https://github.com/mui/mui-x/issues/13477#issuecomment-2336634785
+  useEnhancedEffect(() => {
+    // computeRun is used to avoid infinite loops.
+    if (!resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
+      return;
+    }
+    const computedSize = computeSize();
+    if (computedSize.width !== width || computedSize.height !== height) {
+      stateRef.current.computeRun += 1;
+    } else if (stateRef.current.initialCompute) {
+      stateRef.current.initialCompute = false;
+    }
+  }, [width, height, computeSize, resolveSizeBeforeRender]);
   useEnhancedEffect(() => {
     if (inWidth !== undefined && inHeight !== undefined) {
       return () => {};
@@ -45,7 +71,7 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     }
     return () => {
       if (animationFrame) {
-        window.cancelAnimationFrame(animationFrame);
+        cancelAnimationFrame(animationFrame);
       }
       if (elementToObserve) {
         observer.unobserve(elementToObserve);
@@ -53,13 +79,13 @@ export const useChartContainerDimensions = (inWidth, inHeight) => {
     };
   }, [computeSize, inHeight, inWidth]);
   if (process.env.NODE_ENV !== 'production') {
-    if (displayError.current && inWidth === undefined && width === 0) {
+    if (stateRef.current.displayError && inWidth === undefined && width === 0) {
       console.error(`MUI X: ChartContainer does not have \`width\` prop, and its container has no \`width\` defined.`);
-      displayError.current = false;
+      stateRef.current.displayError = false;
     }
-    if (displayError.current && inHeight === undefined && height === 0) {
+    if (stateRef.current.displayError && inHeight === undefined && height === 0) {
       console.error(`MUI X: ChartContainer does not have \`height\` prop, and its container has no \`height\` defined.`);
-      displayError.current = false;
+      stateRef.current.displayError = false;
     }
   }
   return {

package/modern/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -1,11 +1,14 @@
+'use client';
+
 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"];
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
 import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
 export const useResponsiveChartContainerProps = (props, ref) => {
   const {
       width,
       height,
+      resolveSizeBeforeRender,
       margin,
       children,
       series,
@@ -28,7 +31,7 @@ export const useResponsiveChartContainerProps = (props, ref) => {
     containerRef,
     width: dWidth,
     height: dHeight
-  } = useChartContainerDimensions(width, height);
+  } = useChartContainerDimensions(width, height, resolveSizeBeforeRender);
   const resizableChartContainerProps = _extends({}, other, {
     ownerState: {
       width,

package/modern/ScatterChart/Scatter.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ScatterChart/ScatterChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -132,6 +134,7 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
     itemMarkWidth: PropTypes.number,
     labelStyle: PropTypes.object,
     markGap: PropTypes.number,
+    onItemClick: PropTypes.func,
     padding: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
       bottom: PropTypes.number,
       left: PropTypes.number,
@@ -174,6 +177,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: PropTypes.func,
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.

package/modern/ScatterChart/ScatterPlot.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';

package/modern/ScatterChart/legend.js

@@ -10,9 +10,10 @@ const legendGetter = params => {
       return acc;
     }
     acc.push({
+      id: seriesId,
+      seriesId,
       color: series[seriesId].color,
-      label: formattedLabel,
-      id: seriesId
+      label: formattedLabel
     });
     return acc;
   }, []);

package/modern/ScatterChart/useScatterChartProps.js

@@ -1,3 +1,5 @@
+'use client';
+
 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"];

package/modern/SparkLineChart/SparkLineChart.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["xAxis", "yAxis", "width", "height", "margin", "colors", "sx", "showTooltip", "tooltip", "showHighlight", "axisHighlight", "children", "slots", "slotProps", "data", "plotType", "valueFormatter", "area", "curve", "className"];
@@ -191,6 +193,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 'line'
    */
   plotType: PropTypes.oneOf(['bar', 'line']),
+  /**
+   * The chart will try to wait for the parent container to resolve its size
+   * before it renders for the first time.
+   *
+   * This can be useful in some scenarios where the chart appear to grow after
+   * the first render, like when used inside a grid.
+   *
+   * @default false
+   */
+  resolveSizeBeforeRender: PropTypes.bool,
   /**
    * Set to `true` to highlight the value.
    * With line, it shows a point.