@mui/x-charts 7.22.1 → 8.0.0-alpha.0

package/modern/context/HighlightedProvider/HighlightedProvider.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["highlighted", "faded"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useControlled from '@mui/utils/useControlled';
@@ -11,18 +8,6 @@ import { createIsFaded } from "./createIsFaded.js";
 import { createIsHighlighted } from "./createIsHighlighted.js";
 import { useSeries } from "../../hooks/useSeries.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const mergeDeprecatedOptions = options => {
-  const _ref = options ?? {},
-    {
-      highlighted,
-      faded
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return _extends({
-    highlight: highlighted,
-    fade: faded
-  }, other);
-};
 function HighlightedProvider({
   children,
   highlightedItem: highlightedItemProps,
@@ -41,7 +26,7 @@ function HighlightedProvider({
       const seriesData = series[seriesType];
       Object.keys(seriesData?.series ?? {}).forEach(seriesId => {
         const seriesItem = seriesData?.series[seriesId];
-        map.set(seriesId, mergeDeprecatedOptions(seriesItem?.highlightScope));
+        map.set(seriesId, seriesItem?.highlightScope);
       });
     });
     return map;

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-charts v7.22.1
+ * @mui/x-charts v8.0.0-alpha.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -28,6 +28,5 @@ export * from "./PieChart/index.js";
 export * from "./ScatterChart/index.js";
 export * from "./SparkLineChart/index.js";
 export * from "./Gauge/index.js";
-export * from "./ChartContainer/index.js";
 export * from "./ChartsSurface/index.js";
-export * from "./ResponsiveChartContainer/index.js";
+export * from "./ChartContainer/index.js";

package/modern/internals/computeAxisValue.js

@@ -98,22 +98,30 @@ export function computeAxisValue({
       return;
     }
     const scaleType = axis.scaleType ?? 'linear';
+    const domainLimit = axis.domainLimit ?? 'nice';
     const axisExtremums = [axis.min ?? minData, axis.max ?? maxData];
+    if (typeof domainLimit === 'function') {
+      const {
+        min,
+        max
+      } = domainLimit(minData, maxData);
+      axisExtremums[0] = min;
+      axisExtremums[1] = max;
+    }
     const rawTickNumber = getTickNumber(_extends({}, axis, {
       range,
       domain: axisExtremums
     }));
     const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
     const zoomedRange = zoomScaleRange(range, zoomRange);
-
-    // TODO: move nice to prop? Disable when there is zoom?
-    const scale = getScale(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
-    const [minDomain, maxDomain] = scale.domain();
+    const scale = getScale(scaleType, axisExtremums, zoomedRange);
+    const finalScale = domainLimit === 'nice' ? scale.nice(rawTickNumber) : scale;
+    const [minDomain, maxDomain] = finalScale.domain();
     const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];
     completeAxis[axis.id] = _extends({}, axis, {
       data,
       scaleType: scaleType,
-      scale: scale.domain(domain),
+      scale: finalScale.domain(domain),
       tickNumber,
       colorScale: axis.colorMap && getColorScale(axis.colorMap)
     });

package/modern/internals/getSymbol.js

@@ -1,5 +1,21 @@
-// Returns the index of a defined shape
 export function getSymbol(shape) {
-  const symbolNames = 'circle cross diamond square star triangle wye'.split(/ /);
-  return symbolNames.indexOf(shape) || 0;
+  // prettier-ignore
+  switch (shape) {
+    case 'circle':
+      return 0;
+    case 'cross':
+      return 1;
+    case 'diamond':
+      return 2;
+    case 'square':
+      return 3;
+    case 'star':
+      return 4;
+    case 'triangle':
+      return 5;
+    case 'wye':
+      return 6;
+    default:
+      return 0;
+  }
 }

package/modern/internals/index.js

@@ -1,7 +1,7 @@
 // Components
 export * from "./components/ChartsAxesGradients/index.js";
-export * from "../ResponsiveChartContainer/useChartContainerDimensions.js";
-export * from "../ResponsiveChartContainer/ResizableContainer.js";
+export * from "../ChartContainer/useChartContainerDimensions.js";
+export * from "../ChartContainer/ResizableContainer.js";
 
 // hooks
 export { useSeries } from "../hooks/useSeries.js";
@@ -10,8 +10,8 @@ export { useDrawingArea } from "../hooks/useDrawingArea.js";
 export { useScatterChartProps } from "../ScatterChart/useScatterChartProps.js";
 export { useLineChartProps } from "../LineChart/useLineChartProps.js";
 export { useBarChartProps } from "../BarChart/useBarChartProps.js";
-export { useResponsiveChartContainerProps } from "../ResponsiveChartContainer/useResponsiveChartContainerProps.js";
-export { useChartContainerProps } from "../ChartContainer/useChartContainerProps.js";
+export * from "../ChartContainer/useChartContainerProps.js";
+export * from "../context/ChartDataProvider/useChartDataProviderProps.js";
 
 // utils
 export * from "./defaultizeValueFormatter.js";
@@ -33,10 +33,10 @@ export * from "../context/ZAxisContextProvider.js";
 export * from "../context/PluginProvider/index.js";
 export * from "../context/AnimationProvider/index.js";
 export { getAxisExtremum } from "../context/CartesianProvider/getAxisExtremum.js";
+export * from "../context/ChartDataProvider/index.js";
 
 // series configuration
 export * from "../models/seriesType/config.js";
 export * from "../models/seriesType/common.js";
-export * from "../models/helpers.js";
 export * from "../models/z-axis.js";
 export * from "../models/axis.js";

package/modern/internals/useStringInterpolator.js

@@ -1,3 +1,4 @@
+/* eslint-disable react-compiler/react-compiler */
 import * as React from 'react';
 import { interpolateString } from '@mui/x-charts-vendor/d3-interpolate';
 function usePrevious(value) {

package/node/BarChart/BarChart.js

@@ -12,7 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _styles = require("@mui/material/styles");
 var _BarPlot = require("./BarPlot");
-var _ResponsiveChartContainer = require("../ResponsiveChartContainer");
+var _ChartContainer = require("../ChartContainer");
 var _ChartsAxis = require("../ChartsAxis");
 var _ChartsTooltip = require("../ChartsTooltip");
 var _ChartsLegend = require("../ChartsLegend");
@@ -53,12 +53,12 @@ const BarChart = exports.BarChart = /*#__PURE__*/React.forwardRef(function BarCh
     tooltipProps,
     children
   } = (0, _useBarChartProps.useBarChartProps)(props);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ResponsiveChartContainer.ResponsiveChartContainer, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartContainer.ChartContainer, (0, _extends2.default)({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsOnAxisClickHandler.ChartsOnAxisClickHandler, (0, _extends2.default)({}, axisClickHandlerProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsGrid.ChartsGrid, (0, _extends2.default)({}, gridProps)), /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", (0, _extends2.default)({}, clipPathGroupProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_BarPlot.BarPlot, (0, _extends2.default)({}, barPlotProps)), /*#__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)(_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]
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxis.ChartsAxis, (0, _extends2.default)({}, chartsAxisProps)), !props.hideLegend && /*#__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" ? BarChart.propTypes = {
@@ -123,6 +123,10 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
   height: _propTypes.default.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: _propTypes.default.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -141,32 +145,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.string]),
-  /**
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: _propTypes.default.shape({
-    classes: _propTypes.default.object,
-    direction: _propTypes.default.oneOf(['column', 'row']),
-    hidden: _propTypes.default.bool,
-    itemGap: _propTypes.default.number,
-    itemMarkHeight: _propTypes.default.number,
-    itemMarkWidth: _propTypes.default.number,
-    labelStyle: _propTypes.default.object,
-    markGap: _propTypes.default.number,
-    onItemClick: _propTypes.default.func,
-    padding: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
-      bottom: _propTypes.default.number,
-      left: _propTypes.default.number,
-      right: _propTypes.default.number,
-      top: _propTypes.default.number
-    })]),
-    position: _propTypes.default.shape({
-      horizontal: _propTypes.default.oneOf(['left', 'middle', 'right']).isRequired,
-      vertical: _propTypes.default.oneOf(['bottom', 'middle', 'top']).isRequired
-    }),
-    slotProps: _propTypes.default.object,
-    slots: _propTypes.default.object
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -295,6 +273,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -348,6 +327,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/node/BarChart/BarPlot.js

@@ -57,6 +57,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = (0, _CartesianProvider.useCartesianContext)();
+  const drawingArea = (0, _hooks.useDrawingArea)();
   const chartId = (0, _hooks.useChartId)();
   const {
     series,
@@ -74,9 +75,13 @@ const useAggregatedData = () => {
   const data = stackingGroups.flatMap(({
     ids: groupIds
   }, groupIndex) => {
+    const xMin = drawingArea.left;
+    const xMax = drawingArea.left + drawingArea.width;
+    const yMin = drawingArea.top;
+    const yMax = drawingArea.top + drawingArea.height;
     return groupIds.flatMap(seriesId => {
-      const xAxisId = series[seriesId].xAxisId ?? series[seriesId].xAxisKey ?? defaultXAxisId;
-      const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey ?? defaultYAxisId;
+      const xAxisId = series[seriesId].xAxisId ?? defaultXAxisId;
+      const yAxisId = series[seriesId].yAxisId ?? defaultYAxisId;
       const xAxisConfig = xAxis[xAxisId];
       const yAxisConfig = yAxis[yAxisId];
       const verticalLayout = series[seriesId].layout === 'vertical';
@@ -117,6 +122,9 @@ const useAggregatedData = () => {
           value: series[seriesId].data[dataIndex],
           maskId: `${chartId}_${stackId || seriesId}_${groupIndex}_${dataIndex}`
         };
+        if (result.x > xMax || result.x + result.width < xMin || result.y > yMax || result.y + result.height < yMin) {
+          return null;
+        }
         if (!masks[result.maskId]) {
           masks[result.maskId] = {
             id: result.maskId,
@@ -139,7 +147,7 @@ const useAggregatedData = () => {
         mask.hasNegative = mask.hasNegative || (result.value ?? 0) < 0;
         mask.hasPositive = mask.hasPositive || (result.value ?? 0) > 0;
         return result;
-      });
+      }).filter(rectangle => rectangle !== null);
     });
   });
   return {

package/node/BarChart/extremums.js

@@ -42,7 +42,7 @@ const getValueExtremum = direction => params => {
     isDefaultAxis
   } = params;
   return Object.keys(series).filter(seriesId => {
-    const yAxisId = series[seriesId].yAxisId ?? series[seriesId].yAxisKey;
+    const yAxisId = series[seriesId].yAxisId;
     return yAxisId === axis.id || isDefaultAxis && yAxisId === undefined;
   }).reduce((acc, seriesId) => {
     const {
@@ -51,8 +51,8 @@ const getValueExtremum = direction => params => {
     const filter = getFilters?.({
       currentAxisId: axis.id,
       isDefaultAxis,
-      seriesXAxisId: series[seriesId].xAxisId ?? series[seriesId].xAxisKey,
-      seriesYAxisId: series[seriesId].yAxisId ?? series[seriesId].yAxisKey
+      seriesXAxisId: series[seriesId].xAxisId,
+      seriesYAxisId: series[seriesId].yAxisId
     });
     const [seriesMin, seriesMax] = stackedData?.reduce((seriesAcc, values, index) => {
       if (filter && (!filter(createResult(values[0], direction), index) || !filter(createResult(values[1], direction), index))) {

package/node/BarChart/useBarChartProps.js

@@ -10,7 +10,7 @@ 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", "axisHighlight", "legend", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className"];
+const _excluded = ["xAxis", "yAxis", "series", "width", "height", "margin", "colors", "dataset", "sx", "tooltip", "onAxisClick", "axisHighlight", "grid", "topAxis", "leftAxis", "rightAxis", "bottomAxis", "children", "slots", "slotProps", "skipAnimation", "loading", "layout", "onItemClick", "highlightedItem", "onHighlightChange", "borderRadius", "barLabel", "className", "hideLegend"];
 /**
  * A helper function that extracts BarChartProps from the input props
  * and returns an object with props for the children components of BarChart.
@@ -32,7 +32,6 @@ const useBarChartProps = props => {
       tooltip,
       onAxisClick,
       axisHighlight,
-      legend,
       grid,
       topAxis,
       leftAxis,
@@ -123,10 +122,10 @@ const useBarChartProps = props => {
   } : {
     x: 'band'
   }, axisHighlight);
-  const legendProps = (0, _extends2.default)({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
+  };
   const tooltipProps = (0, _extends2.default)({}, tooltip, {
     slots,
     slotProps

package/node/ChartContainer/ChartContainer.js

@@ -10,47 +10,18 @@ exports.ChartContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _DrawingProvider = require("../context/DrawingProvider");
-var _SeriesProvider = require("../context/SeriesProvider");
-var _InteractionProvider = require("../context/InteractionProvider");
-var _ChartsSurface = require("../ChartsSurface");
-var _CartesianProvider = require("../context/CartesianProvider");
-var _ChartsAxesGradients = require("../internals/components/ChartsAxesGradients");
-var _context = require("../context");
-var _PluginProvider = require("../context/PluginProvider");
+var _ChartDataProvider = require("../context/ChartDataProvider");
+var _ResizableContainer = require("./ResizableContainer");
 var _useChartContainerProps = require("./useChartContainerProps");
-var _AnimationProvider = require("../context/AnimationProvider");
 var _jsxRuntime = require("react/jsx-runtime");
 const ChartContainer = exports.ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps
+    hasIntrinsicSize,
+    chartDataProviderProps,
+    resizableChartContainerProps
   } = (0, _useChartContainerProps.useChartContainerProps)(props, ref);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawingProvider.DrawingProvider, (0, _extends2.default)({}, drawingProviderProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PluginProvider.PluginProvider, (0, _extends2.default)({}, pluginProviderProps, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SeriesProvider.SeriesProvider, (0, _extends2.default)({}, seriesProviderProps, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CartesianProvider.CartesianProvider, (0, _extends2.default)({}, cartesianProviderProps, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.ZAxisContextProvider, (0, _extends2.default)({}, zAxisContextProps, {
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InteractionProvider.InteractionProvider, {
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.HighlightedProvider, (0, _extends2.default)({}, highlightedProviderProps, {
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsSurface.ChartsSurface, (0, _extends2.default)({}, chartsSurfaceProps, {
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsAxesGradients.ChartsAxesGradients, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_AnimationProvider.AnimationProvider, (0, _extends2.default)({}, animationProviderProps, {
-                    children: children
-                  }))]
-                }))
-              }))
-            })
-          }))
-        }))
-      }))
-    }))
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResizableContainer.ResizableContainer, (0, _extends2.default)({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartDataProvider.ChartDataProvider, (0, _extends2.default)({}, chartDataProviderProps)) : null
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
@@ -77,9 +48,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    */
   disableAxisListener: _propTypes.default.bool,
   /**
-   * The height of the chart in px.
+   * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: _propTypes.default.number.isRequired,
+  height: _propTypes.default.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -110,6 +81,16 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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.
@@ -130,9 +111,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     y: _propTypes.default.number
   }),
   /**
-   * The width of the chart in px.
+   * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -159,6 +140,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
@@ -212,6 +194,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     dataKey: _propTypes.default.string,
     disableLine: _propTypes.default.bool,
     disableTicks: _propTypes.default.bool,
+    domainLimit: _propTypes.default.oneOfType([_propTypes.default.oneOf(['nice', 'strict']), _propTypes.default.func]),
     fill: _propTypes.default.string,
     hideTooltip: _propTypes.default.bool,
     id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),

package/node/{ResponsiveChartContainer → ChartContainer}/useChartContainerDimensions.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+/* eslint-disable react-compiler/react-compiler */
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+  const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
     initialCompute: true,
@@ -47,7 +49,7 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
   // 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) {
+    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
       return;
     }
     const computedSize = computeSize();
@@ -56,9 +58,9 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender]);
+  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
   (0, _useEnhancedEffect.default)(() => {
-    if (inWidth !== undefined && inHeight !== undefined) {
+    if (hasInSize) {
       return () => {};
     }
     computeSize();
@@ -84,7 +86,7 @@ const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender)
         observer.unobserve(elementToObserve);
       }
     };
-  }, [computeSize, inHeight, inWidth]);
+  }, [computeSize, hasInSize]);
   if (process.env.NODE_ENV !== 'production') {
     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.`);

package/node/ChartContainer/useChartContainerProps.js

@@ -2,93 +2,76 @@
 'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useChartContainerProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var React = _interopRequireWildcard(require("react"));
-var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
-var _useDefaultizeAxis = require("./useDefaultizeAxis");
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
+var _useChartContainerDimensions = require("./useChartContainerDimensions");
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis", "skipAnimation"];
 const useChartContainerProps = (props, ref) => {
   const {
       width,
       height,
-      series,
+      resolveSizeBeforeRender,
       margin,
-      xAxis,
-      yAxis,
-      zAxis,
+      children,
+      series,
       colors,
       dataset,
-      sx,
-      title,
       desc,
       disableAxisListener,
       highlightedItem,
       onHighlightChange,
       plugins,
-      children,
+      sx,
+      title,
+      viewBox,
+      xAxis,
+      yAxis,
+      zAxis,
       skipAnimation
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = (0, _useForkRef.default)(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = (0, _useDefaultizeAxis.useDefaultizeAxis)(xAxis, yAxis, dataset);
-  const drawingProviderProps = {
-    width,
-    height,
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = (0, _useChartContainerDimensions.useChartContainerDimensions)(width, height, resolveSizeBeforeRender);
+  const resizableChartContainerProps = (0, _extends2.default)({}, other, {
+    ownerState: {
+      width,
+      height
+    },
+    ref: containerRef
+  });
+  const chartDataProviderProps = {
     margin,
-    svgRef
-  };
-  const animationProviderProps = {
-    skipAnimation
-  };
-  const pluginProviderProps = {
-    plugins
-  };
-  const seriesProviderProps = {
+    children,
     series,
     colors,
-    dataset
-  };
-  const cartesianProviderProps = {
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis,
-    dataset
-  };
-  const zAxisContextProps = {
-    zAxis,
-    dataset
-  };
-  const highlightedProviderProps = {
+    dataset,
+    desc,
+    disableAxisListener,
     highlightedItem,
-    onHighlightChange
-  };
-  const chartsSurfaceProps = (0, _extends2.default)({}, other, {
-    width,
-    height,
-    ref: chartSurfaceRef,
+    onHighlightChange,
+    plugins,
     sx,
     title,
-    desc,
-    disableAxisListener
-  });
+    viewBox,
+    xAxis,
+    yAxis,
+    zAxis,
+    skipAnimation,
+    width: dWidth,
+    height: dHeight,
+    ref
+  };
   return {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps,
-    xAxis: defaultizedXAxis,
-    yAxis: defaultizedYAxis
+    hasIntrinsicSize: Boolean(dWidth && dHeight),
+    chartDataProviderProps,
+    resizableChartContainerProps
   };
 };
 exports.useChartContainerProps = useChartContainerProps;

package/node/ChartsLegend/ChartsLegend.js

@@ -17,7 +17,6 @@ var _styles = require("@mui/material/styles");
 var _utils = require("./utils");
 var _chartsLegendClasses = require("./chartsLegendClasses");
 var _DefaultChartsLegend = require("./DefaultChartsLegend");
-var _hooks = require("../hooks");
 var _useSeries = require("../hooks/useSeries");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps"];
@@ -57,7 +56,6 @@ function ChartsLegend(inProps) {
   const classes = useUtilityClasses((0, _extends2.default)({}, defaultizedProps, {
     theme
   }));
-  const drawingArea = (0, _hooks.useDrawingArea)();
   const series = (0, _useSeries.useSeries)();
   const seriesToDisplay = (0, _utils.getSeriesToDisplay)(series);
   const ChartLegendRender = slots?.legend ?? _DefaultChartsLegend.DefaultChartsLegend;
@@ -66,7 +64,6 @@ function ChartsLegend(inProps) {
     externalSlotProps: slotProps?.legend,
     additionalProps: (0, _extends2.default)({}, other, {
       classes,
-      drawingArea,
       series,
       seriesToDisplay
     }),