@mui/x-charts 7.17.0 → 7.18.0

package/modern/context/PolarProvider/usePolarContext.js

@@ -0,0 +1,10 @@
+'use client';
+
+import * as React from 'react';
+import { PolarContext } from "./PolarContext.js";
+export const usePolarContext = () => {
+  const {
+    data
+  } = React.useContext(PolarContext);
+  return data;
+};

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.17.0
+ * @mui/x-charts v7.18.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/{context/CartesianProvider/computeValue.js → internals/computeAxisValue.js}

@@ -1,15 +1,29 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { scaleBand, scalePoint, scaleTime } from '@mui/x-charts-vendor/d3-scale';
-import { isBandScaleConfig, isPointScaleConfig } from "../../models/axis.js";
-import { getColorScale, getOrdinalColorScale } from "../../internals/colorScale.js";
-import { getTickNumber } from "../../hooks/useTicks.js";
-import { getScale } from "../../internals/getScale.js";
-import { zoomScaleRange } from "./zoom.js";
-import { getAxisExtremum } from "./getAxisExtremum.js";
-const getRange = (drawingArea, axisDirection, isReverse) => {
+import { isBandScaleConfig, isPointScaleConfig } from "../models/axis.js";
+import { getColorScale, getOrdinalColorScale } from "./colorScale.js";
+import { getTickNumber } from "../hooks/useTicks.js";
+import { getScale } from "./getScale.js";
+import { zoomScaleRange } from "../context/CartesianProvider/zoom.js";
+import { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
+function getRange(drawingArea, axisDirection, axis) {
+  if (axisDirection === 'rotation') {
+    const {
+      startAngle = 0,
+      endAngle = startAngle + 360
+    } = axis;
+    return axis.reverse ? [Math.PI * startAngle / 180, Math.PI * endAngle / 180] : [Math.PI * endAngle / 180, Math.PI * startAngle / 180];
+  }
+  if (axisDirection === 'radius') {
+    const {
+      minRadius = 0,
+      maxRadius = Math.min(drawingArea.width, drawingArea.height) / 2
+    } = axis;
+    return [minRadius, maxRadius];
+  }
   const range = axisDirection === 'x' ? [drawingArea.left, drawingArea.left + drawingArea.width] : [drawingArea.top + drawingArea.height, drawingArea.top];
-  return isReverse ? range.reverse() : range;
-};
+  return axis.reverse ? [range[1], range[0]] : range;
+}
 const isDateData = data => data?.[0] instanceof Date;
 function createDateFormatter(axis, range) {
   const timeScale = scaleTime(axis.data, range);
@@ -19,7 +33,7 @@ function createDateFormatter(axis, range) {
 }
 const DEFAULT_CATEGORY_GAP_RATIO = 0.2;
 const DEFAULT_BAR_GAP_RATIO = 0.1;
-export function computeValue({
+export function computeAxisValue({
   drawingArea,
   formattedSeries,
   axis: allAxis,
@@ -32,21 +46,20 @@ export function computeValue({
   const completeAxis = {};
   allAxis.forEach((eachAxis, axisIndex) => {
     const axis = eachAxis;
-    const isDefaultAxis = axisIndex === 0;
     const zoomOption = zoomOptions?.[axis.id];
     const zoom = zoomData?.find(({
       axisId
     }) => axisId === axis.id);
     const zoomRange = zoom ? [zoom.start, zoom.end] : [0, 100];
-    const range = getRange(drawingArea, axisDirection, axis.reverse);
-    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, isDefaultAxis, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
+    const range = getRange(drawingArea, axisDirection, axis);
+    const [minData, maxData] = getAxisExtremum(axis, extremumGetters, axisIndex, formattedSeries, zoom === undefined && !zoomOption ? getFilters : undefined // Do not apply filtering if zoom is already defined.
     );
     const data = axis.data ?? [];
     if (isBandScaleConfig(axis)) {
       const categoryGapRatio = axis.categoryGapRatio ?? DEFAULT_CATEGORY_GAP_RATIO;
       const barGapRatio = axis.barGapRatio ?? DEFAULT_BAR_GAP_RATIO;
       // Reverse range because ordinal scales are presented from top to bottom on y-axis
-      const scaleRange = axisDirection === 'x' ? range : [range[1], range[0]];
+      const scaleRange = axisDirection === 'y' ? [range[1], range[0]] : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({
         categoryGapRatio,
@@ -65,7 +78,7 @@ export function computeValue({
       }
     }
     if (isPointScaleConfig(axis)) {
-      const scaleRange = axisDirection === 'x' ? range : [...range].reverse();
+      const scaleRange = axisDirection === 'y' ? [...range].reverse() : range;
       const zoomedRange = zoomScaleRange(scaleRange, zoomRange);
       completeAxis[axis.id] = _extends({}, axis, {
         data,

package/modern/internals/index.js

@@ -22,6 +22,7 @@ export * from "./getSVGPoint.js";
 export * from "./isDefined.js";
 export { unstable_cleanupDOM } from "./domUtils.js";
 export * from "./getScale.js";
+export * from "./computeAxisValue.js";
 
 // contexts
 

package/node/BarChart/BarChart.js

@@ -203,6 +203,16 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar item identifier.
    */
   onItemClick: _propTypes.default.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.default.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/node/ChartsTooltip/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  useMouseTracker: true
+};
+Object.defineProperty(exports, "useMouseTracker", {
+  enumerable: true,
+  get: function () {
+    return _utils.useMouseTracker;
+  }
+});
 var _ChartsTooltip = require("./ChartsTooltip");
 Object.keys(_ChartsTooltip).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsTooltip[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_ChartsTooltip).forEach(function (key) {
 var _chartsTooltipClasses = require("./chartsTooltipClasses");
 Object.keys(_chartsTooltipClasses).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _chartsTooltipClasses[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_chartsTooltipClasses).forEach(function (key) {
 var _ChartsAxisTooltipContent = require("./ChartsAxisTooltipContent");
 Object.keys(_ChartsAxisTooltipContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsAxisTooltipContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_ChartsAxisTooltipContent).forEach(function (key) {
 var _ChartsItemTooltipContent = require("./ChartsItemTooltipContent");
 Object.keys(_ChartsItemTooltipContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsItemTooltipContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_ChartsItemTooltipContent).forEach(function (key) {
 var _DefaultChartsAxisTooltipContent = require("./DefaultChartsAxisTooltipContent");
 Object.keys(_DefaultChartsAxisTooltipContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DefaultChartsAxisTooltipContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +75,7 @@ Object.keys(_DefaultChartsAxisTooltipContent).forEach(function (key) {
 var _DefaultChartsItemTooltipContent = require("./DefaultChartsItemTooltipContent");
 Object.keys(_DefaultChartsItemTooltipContent).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DefaultChartsItemTooltipContent[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +87,7 @@ Object.keys(_DefaultChartsItemTooltipContent).forEach(function (key) {
 var _ChartsTooltipTable = require("./ChartsTooltipTable");
 Object.keys(_ChartsTooltipTable).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _ChartsTooltipTable[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -79,4 +95,29 @@ Object.keys(_ChartsTooltipTable).forEach(function (key) {
       return _ChartsTooltipTable[key];
     }
   });
-});
+});
+var _useItemTooltip = require("./useItemTooltip");
+Object.keys(_useItemTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useItemTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useItemTooltip[key];
+    }
+  });
+});
+var _useAxisTooltip = require("./useAxisTooltip");
+Object.keys(_useAxisTooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useAxisTooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useAxisTooltip[key];
+    }
+  });
+});
+var _utils = require("./utils");

package/node/ChartsTooltip/useAxisTooltip.js

@@ -0,0 +1,90 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAxisTooltip = useAxisTooltip;
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useSeries = require("../hooks/useSeries");
+var _CartesianProvider = require("../context/CartesianProvider");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _getLabel = require("../internals/getLabel");
+var _isCartesian = require("../internals/isCartesian");
+var _utils = require("./utils");
+function useAxisTooltip() {
+  const {
+    axis
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const series = (0, _useSeries.useSeries)();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+
+  // By default use the x-axis
+  const isXaxis = axis.x !== null && axis.x.index !== -1;
+  const axisData = isXaxis ? axis.x && axis.x : axis.y && axis.y;
+  if (axisData === null) {
+    return null;
+  }
+  const {
+    index: dataIndex,
+    value: axisValue
+  } = axisData;
+  const USED_AXIS_ID = isXaxis ? xAxisIds[0] : yAxisIds[0];
+  const usedAxis = isXaxis ? xAxis[USED_AXIS_ID] : yAxis[USED_AXIS_ID];
+  const relevantSeries = Object.keys(series).filter(_isCartesian.isCartesianSeriesType).flatMap(seriesType => {
+    const seriesOfType = series[seriesType];
+    if (!seriesOfType) {
+      return [];
+    }
+    return seriesOfType.seriesOrder.map(seriesId => {
+      const seriesToAdd = seriesOfType.series[seriesId];
+      const providedXAxisId = seriesToAdd.xAxisId ?? seriesToAdd.xAxisKey;
+      const providedYAxisId = seriesToAdd.yAxisId ?? seriesToAdd.yAxisKey;
+      const axisKey = isXaxis ? providedXAxisId : providedYAxisId;
+
+      // Test if the series uses the default axis
+      if (axisKey === undefined || axisKey === USED_AXIS_ID) {
+        const xAxisId = providedXAxisId ?? xAxisIds[0];
+        const yAxisId = providedYAxisId ?? yAxisIds[0];
+        const zAxisId = seriesToAdd.zAxisId ?? seriesToAdd.zAxisKey ?? zAxisIds[0];
+        const color = colorProcessors[seriesType]?.(seriesToAdd, xAxis[xAxisId], yAxis[yAxisId], zAxisId && zAxis[zAxisId])(dataIndex) ?? '';
+        const value = seriesToAdd.data[dataIndex] ?? null;
+        const formattedValue = seriesToAdd.valueFormatter(value, {
+          dataIndex
+        });
+        const formattedLabel = (0, _getLabel.getLabel)(seriesToAdd.label, 'tooltip') ?? null;
+        return {
+          seriesId,
+          color,
+          value,
+          formattedValue,
+          formattedLabel
+        };
+      }
+      return undefined;
+    });
+  }).filter(item => item != null);
+  const axisFormatter = usedAxis.valueFormatter ?? (v => usedAxis.scaleType === 'utc' ? (0, _utils.utcFormatter)(v) : v.toLocaleString());
+  const axisFormattedValue = axisFormatter(axisValue, {
+    location: 'tooltip'
+  });
+  return {
+    identifier: axis,
+    seriesItems: relevantSeries,
+    axisValue,
+    axisFormattedValue
+  };
+}

package/node/ChartsTooltip/useItemTooltip.js

@@ -0,0 +1,71 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useItemTooltip = useItemTooltip;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _InteractionProvider = require("../context/InteractionProvider");
+var _useSeries = require("../hooks/useSeries");
+var _CartesianProvider = require("../context/CartesianProvider");
+var _ZAxisContextProvider = require("../context/ZAxisContextProvider");
+var _useColorProcessor = require("../context/PluginProvider/useColorProcessor");
+var _getLabel = require("../internals/getLabel");
+function useItemTooltip() {
+  const {
+    item
+  } = React.useContext(_InteractionProvider.InteractionContext);
+  const series = (0, _useSeries.useSeries)();
+  const {
+    xAxis,
+    yAxis,
+    xAxisIds,
+    yAxisIds
+  } = (0, _CartesianProvider.useCartesianContext)();
+  const {
+    zAxis,
+    zAxisIds
+  } = React.useContext(_ZAxisContextProvider.ZAxisContext);
+  const colorProcessors = (0, _useColorProcessor.useColorProcessor)();
+  const xAxisId = series.xAxisId ?? series.xAxisKey ?? xAxisIds[0];
+  const yAxisId = series.yAxisId ?? series.yAxisKey ?? yAxisIds[0];
+  const zAxisId = series.zAxisId ?? series.zAxisKey ?? zAxisIds[0];
+  if (!item || item.dataIndex === undefined) {
+    return null;
+  }
+  const itemSeries = series[item.type].series[item.seriesId];
+  const getColor = colorProcessors[itemSeries.type]?.(itemSeries, xAxisId && xAxis[xAxisId], yAxisId && yAxis[yAxisId], zAxisId && zAxis[zAxisId]) ?? (() => '');
+  if (itemSeries.type === 'pie') {
+    const point = itemSeries.data[item.dataIndex];
+    const label = (0, _getLabel.getLabel)(point.label, 'tooltip');
+    const value = (0, _extends2.default)({}, point, {
+      label
+    });
+    const formattedValue = itemSeries.valueFormatter?.(value, {
+      dataIndex: item.dataIndex
+    });
+    return {
+      identifier: item,
+      color: getColor(item.dataIndex),
+      label,
+      value,
+      formattedValue
+    };
+  }
+  const label = (0, _getLabel.getLabel)(itemSeries.label, 'tooltip');
+  const value = itemSeries.data[item.dataIndex];
+  const formattedValue = itemSeries.valueFormatter?.(value, {
+    dataIndex: item.dataIndex
+  });
+  return {
+    identifier: item,
+    color: getColor(item.dataIndex),
+    label,
+    value,
+    formattedValue
+  };
+}

package/node/LineChart/AnimatedLine.js

@@ -52,29 +52,19 @@ function AnimatedLine(props) {
       ownerState
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const {
-    left,
-    top,
-    bottom,
-    width,
-    height,
-    right
-  } = (0, _useDrawingArea.useDrawingArea)();
+  const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const chartId = (0, _useChartId.useChartId)();
   const stringInterpolator = (0, _useStringInterpolator.useStringInterpolator)(d);
-  const transitionAppear = (0, _web.useTransition)([1], {
-    from: {
-      animatedWidth: left
-    },
-    to: {
-      animatedWidth: width + left + right
-    },
-    enter: {
-      animatedWidth: width + left + right
-    },
-    leave: {
-      animatedWidth: left
-    },
+  const transitionAppear = (0, _web.useTransition)([drawingArea], {
+    from: v => ({
+      animatedWidth: v.left
+    }),
+    enter: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
+    leave: v => ({
+      animatedWidth: v.width + v.left + v.right
+    }),
     reset: false,
     immediate: skipAnimation
   });
@@ -99,7 +89,7 @@ function AnimatedLine(props) {
         x: 0,
         y: 0,
         width: style.animatedWidth,
-        height: top + height + bottom
+        height: drawingArea.top + drawingArea.height + drawingArea.bottom
       }))
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       clipPath: `url(#${clipId})`,

package/node/LineChart/LineChart.js

@@ -207,6 +207,16 @@ process.env.NODE_ENV !== "production" ? LineChart.propTypes = {
    * Callback fired when a mark element is clicked.
    */
   onMarkClick: _propTypes.default.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.default.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/node/PieChart/PieChart.js

@@ -247,6 +247,16 @@ process.env.NODE_ENV !== "production" ? PieChart.propTypes = {
    * Callback fired when a pie arc is clicked.
    */
   onItemClick: _propTypes.default.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.default.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/node/ResponsiveChartContainer/ResponsiveChartContainer.js

@@ -81,6 +81,16 @@ process.env.NODE_ENV !== "production" ? ResponsiveChartContainer.propTypes = {
    * If not provided, the container supports line, bar, scatter and pie charts.
    */
   plugins: _propTypes.default.arrayOf(_propTypes.default.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.default.bool,
   /**
    * The array of series to display.
    * Each type of series has its own specificity.

package/node/ResponsiveChartContainer/useChartContainerDimensions.js

@@ -10,8 +10,12 @@ exports.useChartContainerDimensions = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
-const useChartContainerDimensions = (inWidth, inHeight) => {
-  const displayError = React.useRef(false);
+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);
@@ -20,7 +24,7 @@ const useChartContainerDimensions = (inWidth, inHeight) => {
   const computeSize = React.useCallback(() => {
     const mainEl = rootRef?.current;
     if (!mainEl) {
-      return;
+      return {};
     }
     const win = (0, _ownerWindow.default)(mainEl);
     const computedStyle = win.getComputedStyle(mainEl);
@@ -28,11 +32,31 @@ 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
+  (0, _useEnhancedEffect.default)(() => {
+    // 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]);
   (0, _useEnhancedEffect.default)(() => {
     if (inWidth !== undefined && inHeight !== undefined) {
       return () => {};
@@ -62,13 +86,13 @@ 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/node/ResponsiveChartContainer/useResponsiveChartContainerProps.js

@@ -9,11 +9,12 @@ 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 _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis"];
 const useResponsiveChartContainerProps = (props, ref) => {
   const {
       width,
       height,
+      resolveSizeBeforeRender,
       margin,
       children,
       series,
@@ -36,7 +37,7 @@ const useResponsiveChartContainerProps = (props, ref) => {
     containerRef,
     width: dWidth,
     height: dHeight
-  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height);
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height, resolveSizeBeforeRender);
   const resizableChartContainerProps = (0, _extends2.default)({}, other, {
     ownerState: {
       width,

package/node/ScatterChart/ScatterChart.js

@@ -184,6 +184,16 @@ process.env.NODE_ENV !== "production" ? ScatterChart.propTypes = {
    * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter item identifier.
    */
   onItemClick: _propTypes.default.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.default.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/node/SparkLineChart/SparkLineChart.js

@@ -200,6 +200,16 @@ process.env.NODE_ENV !== "production" ? SparkLineChart.propTypes = {
    * @default 'line'
    */
   plotType: _propTypes.default.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.default.bool,
   /**
    * Set to `true` to highlight the value.
    * With line, it shows a point.

package/node/context/CartesianProvider/CartesianProvider.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CartesianProvider = CartesianProvider;
 var React = _interopRequireWildcard(require("react"));
+var _computeAxisValue = require("../../internals/computeAxisValue");
 var _useDrawingArea = require("../../hooks/useDrawingArea");
 var _useSeries = require("../../hooks/useSeries");
 var _CartesianContext = require("./CartesianContext");
-var _computeValue = require("./computeValue");
 var _useXExtremumGetter = require("../PluginProvider/useXExtremumGetter");
 var _PluginProvider = require("../PluginProvider");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -24,14 +24,14 @@ function CartesianProvider(props) {
   const drawingArea = (0, _useDrawingArea.useDrawingArea)();
   const xExtremumGetters = (0, _useXExtremumGetter.useXExtremumGetter)();
   const yExtremumGetters = (0, _PluginProvider.useYExtremumGetter)();
-  const xValues = React.useMemo(() => (0, _computeValue.computeValue)({
+  const xValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
     drawingArea,
     formattedSeries,
     axis: xAxis,
     extremumGetters: xExtremumGetters,
     axisDirection: 'x'
   }), [drawingArea, formattedSeries, xAxis, xExtremumGetters]);
-  const yValues = React.useMemo(() => (0, _computeValue.computeValue)({
+  const yValues = React.useMemo(() => (0, _computeAxisValue.computeAxisValue)({
     drawingArea,
     formattedSeries,
     axis: yAxis,