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

package/internals/index.d.ts

@@ -1,14 +1,14 @@
 export * from './components/ChartsAxesGradients';
-export * from '../ResponsiveChartContainer/useChartContainerDimensions';
-export * from '../ResponsiveChartContainer/ResizableContainer';
+export * from '../ChartContainer/useChartContainerDimensions';
+export * from '../ChartContainer/ResizableContainer';
 export { useSeries } from '../hooks/useSeries';
 export { useInteractionItemProps } from '../hooks/useInteractionItemProps';
 export { useDrawingArea } from '../hooks/useDrawingArea';
 export { useScatterChartProps } from '../ScatterChart/useScatterChartProps';
 export { useLineChartProps } from '../LineChart/useLineChartProps';
 export { useBarChartProps } from '../BarChart/useBarChartProps';
-export { useResponsiveChartContainerProps } from '../ResponsiveChartContainer/useResponsiveChartContainerProps';
-export { useChartContainerProps } from '../ChartContainer/useChartContainerProps';
+export * from '../ChartContainer/useChartContainerProps';
+export * from '../context/ChartDataProvider/useChartDataProviderProps';
 export * from './defaultizeValueFormatter';
 export * from './configInit';
 export * from './getLabel';
@@ -26,8 +26,8 @@ export * from '../context/PluginProvider';
 export * from '../context/AnimationProvider';
 export type * from '../context/context.types';
 export { getAxisExtremum } from '../context/CartesianProvider/getAxisExtremum';
+export * from '../context/ChartDataProvider';
 export * from '../models/seriesType/config';
 export * from '../models/seriesType/common';
-export * from '../models/helpers';
 export * from '../models/z-axis';
 export * from '../models/axis';

package/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/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/models/axis.d.ts

@@ -280,6 +280,16 @@ export type AxisConfig<S extends ScaleName = ScaleName, V = any, AxisProps = Cha
      * If `true`, Reverse the axis scaleBand.
      */
     reverse?: boolean;
+    /**
+     * Defines the axis scale domain based on the min/max values of series linked to it.
+     * - 'nice': Rounds the domain at human friendly values.
+     * - 'strict': Set the domain to the min/max value provided. No extras space is added.
+     * - function: Receives the calculated extremums as parameters, and should return the axis domain.
+     */
+    domainLimit?: 'nice' | 'strict' | ((min: number, max: number) => {
+        min: number;
+        max: number;
+    });
 } & Omit<Partial<AxisProps>, 'axisId'> & Partial<Omit<AxisScaleConfig[S], 'scale'>> & TickParams & AxisConfigExtension;
 export interface AxisConfigExtension {
 }

package/models/seriesType/bar.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from '../stacking';
 import { CartesianSeriesType, CommonSeriesType, CommonDefaultizedProps, StackableSeriesType } from './common';
 export interface BarSeriesType extends CommonSeriesType<number | null>, CartesianSeriesType, StackableSeriesType {

package/models/seriesType/common.d.ts

@@ -7,7 +7,7 @@ export type SeriesValueFormatterContext = {
      */
     dataIndex: number;
 };
-export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string;
+export type SeriesValueFormatter<TValue> = (value: TValue, context: SeriesValueFormatterContext) => string | null;
 export type CommonSeriesType<TValue> = {
     id?: SeriesId;
     color?: string;
@@ -15,7 +15,7 @@ export type CommonSeriesType<TValue> = {
      * Formatter used to render values in tooltip or other data display.
      * @param {TValue} value The series' value to render.
      * @param {SeriesValueFormatterContext} context The rendering context of the value.
-     * @returns {string} The string to display.
+     * @returns {string | null} The string to display or null if the value should not be shown.
      */
     valueFormatter?: SeriesValueFormatter<TValue>;
     /**
@@ -25,16 +25,6 @@ export type CommonSeriesType<TValue> = {
 };
 export type CommonDefaultizedProps = 'id' | 'valueFormatter' | 'data';
 export type CartesianSeriesType = {
-    /**
-     * The id of the x-axis used to render the series.
-     * @deprecated Use `xAxisId` instead
-     */
-    xAxisKey?: string;
-    /**
-     * The id of the y-axis used to render the series.
-     * @deprecated Use `xAxisId` instead
-     */
-    yAxisKey?: string;
     /**
      * The id of the x-axis used to render the series.
      */

package/models/seriesType/config.d.ts

@@ -1,8 +1,8 @@
+import { DefaultizedProps, MakeOptional } from '@mui/x-internals/types';
 import { ScatterSeriesType, DefaultizedScatterSeriesType, ScatterItemIdentifier, ScatterValueType } from './scatter';
 import { LineSeriesType, DefaultizedLineSeriesType, LineItemIdentifier } from './line';
 import { BarItemIdentifier, BarSeriesType, DefaultizedBarSeriesType } from './bar';
 import { PieSeriesType, DefaultizedPieSeriesType, PieItemIdentifier, PieValueType, DefaultizedPieValueType } from './pie';
-import { DefaultizedProps, MakeOptional } from '../helpers';
 export interface ChartsSeriesConfig {
     bar: {
         /**

package/models/seriesType/line.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import type { StackOffsetType } from '../stacking';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId, StackableSeriesType } from './common';
 export type CurveType = 'catmullRom' | 'linear' | 'monotoneX' | 'monotoneY' | 'natural' | 'step' | 'stepBefore' | 'stepAfter';

package/models/seriesType/pie.d.ts

@@ -1,5 +1,5 @@
 import { PieArcDatum as D3PieArcDatum } from '@mui/x-charts-vendor/d3-shape';
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
 export type PieItemId = string | number;
 export type PieValueType = {

package/models/seriesType/scatter.d.ts

@@ -1,4 +1,4 @@
-import { DefaultizedProps } from '../helpers';
+import { DefaultizedProps } from '@mui/x-internals/types';
 import { CartesianSeriesType, CommonDefaultizedProps, CommonSeriesType, SeriesId } from './common';
 export type ScatterValueType = {
     x: number;
@@ -22,11 +22,6 @@ export interface ScatterSeriesType extends CommonSeriesType<ScatterValueType>, C
      * @default false
      */
     disableHover?: boolean;
-    /**
-     * The id of the z-axis used to render the series.
-     * @deprecated Use `zAxisId` instead.
-     */
-    zAxisKey?: string;
     /**
      * The id of the z-axis used to render the series.
      */

package/modern/BarChart/BarChart.js

@@ -5,7 +5,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useThemeProps } from '@mui/material/styles';
 import { BarPlot } from "./BarPlot.js";
-import { ResponsiveChartContainer } from "../ResponsiveChartContainer/index.js";
+import { ChartContainer } from "../ChartContainer/index.js";
 import { ChartsAxis } from "../ChartsAxis/index.js";
 import { ChartsTooltip } from "../ChartsTooltip/index.js";
 import { ChartsLegend } from "../ChartsLegend/index.js";
@@ -46,12 +46,12 @@ const BarChart = /*#__PURE__*/React.forwardRef(function BarChart(inProps, ref) {
     tooltipProps,
     children
   } = useBarChartProps(props);
-  return /*#__PURE__*/_jsxs(ResponsiveChartContainer, _extends({
+  return /*#__PURE__*/_jsxs(ChartContainer, _extends({
     ref: ref
   }, chartContainerProps, {
     children: [props.onAxisClick && /*#__PURE__*/_jsx(ChartsOnAxisClickHandler, _extends({}, axisClickHandlerProps)), /*#__PURE__*/_jsx(ChartsGrid, _extends({}, gridProps)), /*#__PURE__*/_jsxs("g", _extends({}, clipPathGroupProps, {
       children: [/*#__PURE__*/_jsx(BarPlot, _extends({}, barPlotProps)), /*#__PURE__*/_jsx(ChartsOverlay, _extends({}, overlayProps)), /*#__PURE__*/_jsx(ChartsAxisHighlight, _extends({}, axisHighlightProps))]
-    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
+    })), /*#__PURE__*/_jsx(ChartsAxis, _extends({}, chartsAxisProps)), !props.hideLegend && /*#__PURE__*/_jsx(ChartsLegend, _extends({}, legendProps)), !props.loading && /*#__PURE__*/_jsx(ChartsTooltip, _extends({}, tooltipProps)), /*#__PURE__*/_jsx(ChartsClipPath, _extends({}, clipPathProps)), children]
   }));
 });
 process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
@@ -116,6 +116,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.number,
+  /**
+   * If `true`, the legend is not rendered.
+   */
+  hideLegend: PropTypes.bool,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -134,32 +138,6 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
    * @default yAxisIds[0] The id of the first provided axis
    */
   leftAxis: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
-  /**
-   * @deprecated Consider using `slotProps.legend` instead.
-   */
-  legend: PropTypes.shape({
-    classes: PropTypes.object,
-    direction: PropTypes.oneOf(['column', 'row']),
-    hidden: PropTypes.bool,
-    itemGap: PropTypes.number,
-    itemMarkHeight: PropTypes.number,
-    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,
-      right: PropTypes.number,
-      top: PropTypes.number
-    })]),
-    position: PropTypes.shape({
-      horizontal: PropTypes.oneOf(['left', 'middle', 'right']).isRequired,
-      vertical: PropTypes.oneOf(['bottom', 'middle', 'top']).isRequired
-    }),
-    slotProps: PropTypes.object,
-    slots: PropTypes.object
-  }),
   /**
    * If `true`, a loading overlay is displayed.
    * @default false
@@ -288,6 +266,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -341,6 +320,7 @@ process.env.NODE_ENV !== "production" ? BarChart.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/modern/BarChart/BarPlot.js

@@ -9,7 +9,7 @@ import { useTransition } from '@react-spring/web';
 import { useCartesianContext } from "../context/CartesianProvider/index.js";
 import { BarElement } from "./BarElement.js";
 import getColor from "./getColor.js";
-import { useChartId } from "../hooks/index.js";
+import { useChartId, useDrawingArea } from "../hooks/index.js";
 import { BarClipPath } from "./BarClipPath.js";
 import { BarLabelPlot } from "./BarLabel/BarLabelPlot.js";
 import { checkScaleErrors } from "./checkScaleErrors.js";
@@ -51,6 +51,7 @@ const useAggregatedData = () => {
     seriesOrder: []
   };
   const axisData = useCartesianContext();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
   const {
     series,
@@ -68,9 +69,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';
@@ -111,6 +116,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,
@@ -133,7 +141,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/modern/BarChart/extremums.js

@@ -36,7 +36,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 {
@@ -45,8 +45,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/modern/BarChart/useBarChartProps.js

@@ -2,7 +2,7 @@
 
 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", "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"];
 import useId from '@mui/utils/useId';
 import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from "../constants/index.js";
 /**
@@ -26,7 +26,6 @@ export const useBarChartProps = props => {
       tooltip,
       onAxisClick,
       axisHighlight,
-      legend,
       grid,
       topAxis,
       leftAxis,
@@ -117,10 +116,10 @@ export const useBarChartProps = props => {
   } : {
     x: 'band'
   }, axisHighlight);
-  const legendProps = _extends({}, legend, {
+  const legendProps = {
     slots,
     slotProps
-  });
+  };
   const tooltipProps = _extends({}, tooltip, {
     slots,
     slotProps

package/modern/ChartContainer/ChartContainer.js

@@ -3,47 +3,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { DrawingProvider } from "../context/DrawingProvider.js";
-import { SeriesProvider } from "../context/SeriesProvider/index.js";
-import { InteractionProvider } from "../context/InteractionProvider.js";
-import { ChartsSurface } from "../ChartsSurface/index.js";
-import { CartesianProvider } from "../context/CartesianProvider/index.js";
-import { ChartsAxesGradients } from "../internals/components/ChartsAxesGradients/index.js";
-import { HighlightedProvider, ZAxisContextProvider } from "../context/index.js";
-import { PluginProvider } from "../context/PluginProvider/index.js";
+import { ChartDataProvider } from "../context/ChartDataProvider/index.js";
+import { ResizableContainer } from "./ResizableContainer.js";
 import { useChartContainerProps } from "./useChartContainerProps.js";
-import { AnimationProvider } from "../context/AnimationProvider/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const ChartContainer = /*#__PURE__*/React.forwardRef(function ChartContainer(props, ref) {
   const {
-    children,
-    drawingProviderProps,
-    seriesProviderProps,
-    cartesianProviderProps,
-    zAxisContextProps,
-    highlightedProviderProps,
-    chartsSurfaceProps,
-    pluginProviderProps,
-    animationProviderProps
+    hasIntrinsicSize,
+    chartDataProviderProps,
+    resizableChartContainerProps
   } = useChartContainerProps(props, ref);
-  return /*#__PURE__*/_jsx(DrawingProvider, _extends({}, drawingProviderProps, {
-    children: /*#__PURE__*/_jsx(PluginProvider, _extends({}, pluginProviderProps, {
-      children: /*#__PURE__*/_jsx(SeriesProvider, _extends({}, seriesProviderProps, {
-        children: /*#__PURE__*/_jsx(CartesianProvider, _extends({}, cartesianProviderProps, {
-          children: /*#__PURE__*/_jsx(ZAxisContextProvider, _extends({}, zAxisContextProps, {
-            children: /*#__PURE__*/_jsx(InteractionProvider, {
-              children: /*#__PURE__*/_jsx(HighlightedProvider, _extends({}, highlightedProviderProps, {
-                children: /*#__PURE__*/_jsxs(ChartsSurface, _extends({}, chartsSurfaceProps, {
-                  children: [/*#__PURE__*/_jsx(ChartsAxesGradients, {}), /*#__PURE__*/_jsx(AnimationProvider, _extends({}, animationProviderProps, {
-                    children: children
-                  }))]
-                }))
-              }))
-            })
-          }))
-        }))
-      }))
-    }))
+  return /*#__PURE__*/_jsx(ResizableContainer, _extends({}, resizableChartContainerProps, {
+    children: hasIntrinsicSize ? /*#__PURE__*/_jsx(ChartDataProvider, _extends({}, chartDataProviderProps)) : null
   }));
 });
 process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
@@ -70,9 +41,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
    */
   disableAxisListener: PropTypes.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.number.isRequired,
+  height: PropTypes.number,
   /**
    * The item currently highlighted. Turns highlighting into a controlled prop.
    */
@@ -103,6 +74,16 @@ process.env.NODE_ENV !== "production" ? ChartContainer.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.
@@ -123,9 +104,9 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     y: PropTypes.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.number.isRequired,
+  width: PropTypes.number,
   /**
    * The configuration of the x-axes.
    * If not provided, a default axis config is used.
@@ -152,6 +133,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -205,6 +187,7 @@ process.env.NODE_ENV !== "production" ? ChartContainer.propTypes = {
     dataKey: PropTypes.string,
     disableLine: PropTypes.bool,
     disableTicks: PropTypes.bool,
+    domainLimit: PropTypes.oneOfType([PropTypes.oneOf(['nice', 'strict']), PropTypes.func]),
     fill: PropTypes.string,
     hideTooltip: PropTypes.bool,
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

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

@@ -1,9 +1,11 @@
 'use client';
 
+/* eslint-disable react-compiler/react-compiler */
 import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
 export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBeforeRender) => {
+  const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({
     displayError: false,
     initialCompute: true,
@@ -40,7 +42,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
   // 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) {
+    if (hasInSize || !resolveSizeBeforeRender || !stateRef.current.initialCompute || stateRef.current.computeRun > 20) {
       return;
     }
     const computedSize = computeSize();
@@ -49,9 +51,9 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender]);
+  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
   useEnhancedEffect(() => {
-    if (inWidth !== undefined && inHeight !== undefined) {
+    if (hasInSize) {
       return () => {};
     }
     computeSize();
@@ -77,7 +79,7 @@ export const useChartContainerDimensions = (inWidth, inHeight, resolveSizeBefore
         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/modern/ChartContainer/useChartContainerProps.js

@@ -2,85 +2,69 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["width", "height", "series", "margin", "xAxis", "yAxis", "zAxis", "colors", "dataset", "sx", "title", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "children", "skipAnimation"];
-import * as React from 'react';
-import useForkRef from '@mui/utils/useForkRef';
-import { useDefaultizeAxis } from "./useDefaultizeAxis.js";
+const _excluded = ["width", "height", "resolveSizeBeforeRender", "margin", "children", "series", "colors", "dataset", "desc", "disableAxisListener", "highlightedItem", "onHighlightChange", "plugins", "sx", "title", "viewBox", "xAxis", "yAxis", "zAxis", "skipAnimation"];
+import { useChartContainerDimensions } from "./useChartContainerDimensions.js";
 export 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 = _objectWithoutPropertiesLoose(props, _excluded);
-  const svgRef = React.useRef(null);
-  const chartSurfaceRef = useForkRef(ref, svgRef);
-  const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset);
-  const drawingProviderProps = {
-    width,
-    height,
+  const {
+    containerRef,
+    width: dWidth,
+    height: dHeight
+  } = useChartContainerDimensions(width, height, resolveSizeBeforeRender);
+  const resizableChartContainerProps = _extends({}, 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 = _extends({}, 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
   };
 };