[charts] Remove intrinsic size requirement

packages/x-charts/src/ChartContainer/ResizableContainer.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { useSize } from '../context/SizeProvider';
 import type { SizeContextState } from '../context/SizeProvider';
+import { useDrawingArea } from '../hooks';
 
 /**
  * Wrapping div that take the shape of its parent.
@@ -22,12 +23,30 @@ export const ResizableContainerRoot = styled('div', {
   alignItems: 'center',
   justifyContent: 'center',
   overflow: 'hidden',
-  '&>svg': {
+  '& svg': {
     width: '100%',
     height: '100%',
   },
 }));
 
+/**
+ * This svg will fill the parent container. And prevent an SVG rendered with size 0.
+ *
+ * @ignore - internal component.
+ */
+function SvgSize() {
+  const { width, height, left, right, top, bottom } = useDrawingArea();
+
+  const svgView = {
+    width: width + left + right,
+    height: height + top + bottom,
+    x: 0,
+    y: 0,
+  };
+
+  return <svg viewBox={`${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`} />;
+}
+
 /**
  * Wrapping div that take the shape of its parent.
  *
@@ -42,7 +61,7 @@ function ResizableContainer(props: { children: React.ReactNode }) {
       ownerState={{ width: inWidth, height: inHeight }}
       ref={containerRef}
     >
-      {hasIntrinsicSize && props.children}
+      {hasIntrinsicSize ? props.children : <SvgSize />}
     </ResizableContainerRoot>
   );
 }

packages/x-charts/src/ChartsSurface/ChartsSurface.tsx

@@ -56,8 +56,6 @@ const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(functi
 
   return (
     <ChartsSurfaceStyles
-      width={svgWidth}
-      height={svgHeight}
       viewBox={`${svgView.x} ${svgView.y} ${svgView.width} ${svgView.height}`}
       className={className}
       {...other}

packages/x-charts/src/context/SizeProvider/SizeProvider.tsx

@@ -12,11 +12,7 @@ import { useChartContainerDimensions } from './useChartContainerDimensions';
  * This provider is also responsible for resolving the size of the container before rendering and if the parent size changes.
  */
 function SizeProvider(props: SizeProviderProps) {
-  const dimensions = useChartContainerDimensions(
-    props.width,
-    props.height,
-    props.resolveSizeBeforeRender,
-  );
+  const dimensions = useChartContainerDimensions(props.width, props.height);
 
   const value = React.useMemo(
     () => ({

packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts

@@ -4,11 +4,9 @@ import * as React from 'react';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import ownerWindow from '@mui/utils/ownerWindow';
 
-export const useChartContainerDimensions = (
-  inWidth?: number,
-  inHeight?: number,
-  resolveSizeBeforeRender?: boolean,
-) => {
+const MAX_COMPUTE_RUN = 10;
+
+export const useChartContainerDimensions = (inWidth?: number, inHeight?: number) => {
   const hasInSize = inWidth !== undefined && inHeight !== undefined;
   const stateRef = React.useRef({ displayError: false, initialCompute: true, computeRun: 0 });
   const rootRef = React.useRef<HTMLDivElement>(null);
@@ -48,9 +46,8 @@ export const useChartContainerDimensions = (
     // computeRun is used to avoid infinite loops.
     if (
       hasInSize ||
-      !resolveSizeBeforeRender ||
       !stateRef.current.initialCompute ||
-      stateRef.current.computeRun > 20
+      stateRef.current.computeRun > MAX_COMPUTE_RUN
     ) {
       return;
     }
@@ -61,7 +58,7 @@ export const useChartContainerDimensions = (
     } else if (stateRef.current.initialCompute) {
       stateRef.current.initialCompute = false;
     }
-  }, [width, height, computeSize, resolveSizeBeforeRender, hasInSize]);
+  }, [width, height, computeSize, hasInSize]);
 
   useEnhancedEffect(() => {
     if (hasInSize) {
@@ -111,15 +108,14 @@ export const useChartContainerDimensions = (
       stateRef.current.displayError = false;
     }
   }
-
   const finalWidth = inWidth ?? width;
   const finalHeight = inHeight ?? height;
 
   return {
     containerRef: rootRef,
     width: finalWidth,
     height: finalHeight,
-    hasIntrinsicSize: Boolean(finalWidth && finalHeight),
+    hasIntrinsicSize: Boolean(finalWidth > 0 && finalHeight > 0),
     inWidth,
     inHeight,
   };