[charts] Remove intrinsic size requirement (#15471)

Signed-off-by: Jose C Quintas Jr <[email protected]>
Co-authored-by: Alexandre Fauquette <[email protected]>

docs/data/migration/migration-charts-v7/migration-charts-v7.md

@@ -120,3 +120,8 @@ This code has been removed in v8, which implies removing the following props: `a
 
 This should not impact your code.
 If you used axes in a pie chart please open an issue, we would be curious to get more information about the use-case.
+
+## Remove `resolveSizeBeforeRender` prop
+
+The `resolveSizeBeforeRender` prop has been removed from all components.
+If you were using this prop, you can safely remove it.

docs/pages/x/api/charts/bar-chart-pro.json

@@ -81,7 +81,6 @@
         "describedArgs": ["zoomData"]
       }
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/bar-chart.json

@@ -74,7 +74,6 @@
         "describedArgs": ["event", "barItemIdentifier"]
       }
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/chart-container-pro.json

@@ -39,7 +39,6 @@
       }
     },
     "plugins": { "type": { "name": "arrayOf", "description": "Array<object>" } },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "skipAnimation": { "type": { "name": "bool" } },
     "width": { "type": { "name": "number" } },
     "xAxis": {

docs/pages/x/api/charts/chart-container.json

@@ -32,7 +32,6 @@
       }
     },
     "plugins": { "type": { "name": "arrayOf", "description": "Array<object>" } },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "skipAnimation": { "type": { "name": "bool" } },
     "width": { "type": { "name": "number" } },
     "xAxis": {

docs/pages/x/api/charts/heatmap.json

@@ -61,7 +61,6 @@
         "describedArgs": ["highlightedItem"]
       }
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/line-chart-pro.json

@@ -74,7 +74,6 @@
         "describedArgs": ["zoomData"]
       }
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/line-chart.json

@@ -67,7 +67,6 @@
     },
     "onLineClick": { "type": { "name": "func" } },
     "onMarkClick": { "type": { "name": "func" } },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/pie-chart.json

@@ -34,7 +34,6 @@
       }
     },
     "onItemClick": { "type": { "name": "func" } },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "skipAnimation": { "type": { "name": "bool" } },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {

docs/pages/x/api/charts/scatter-chart-pro.json

@@ -70,7 +70,6 @@
         "describedArgs": ["zoomData"]
       }
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/scatter-chart.json

@@ -63,7 +63,6 @@
         "describedArgs": ["event", "scatterItemIdentifier"]
       }
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "rightAxis": {
       "type": { "name": "union", "description": "object<br>&#124;&nbsp;string" },
       "default": "null"

docs/pages/x/api/charts/spark-line-chart.json

@@ -36,7 +36,6 @@
       "type": { "name": "enum", "description": "'bar'<br>&#124;&nbsp;'line'" },
       "default": "'line'"
     },
-    "resolveSizeBeforeRender": { "type": { "name": "bool" }, "default": "false" },
     "showHighlight": { "type": { "name": "bool" }, "default": "false" },
     "showTooltip": { "type": { "name": "bool" }, "default": "false" },
     "skipAnimation": { "type": { "name": "bool" } },

docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json

@@ -57,9 +57,6 @@
       "description": "Callback fired when the zoom has changed.",
       "typeDescriptions": { "zoomData": "Updated zoom data." }
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/bar-chart/bar-chart.json

@@ -53,9 +53,6 @@
         "barItemIdentifier": "The bar item identifier."
       }
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json

@@ -28,9 +28,6 @@
     "plugins": {
       "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts."
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "series": {
       "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it."
     },

docs/translations/api-docs/charts/chart-container/chart-container.json

@@ -24,9 +24,6 @@
     "plugins": {
       "description": "An array of plugins defining how to preprocess data. If not provided, the container supports line, bar, scatter and pie charts."
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "series": {
       "description": "The array of series to display. Each type of series has its own specificity. Please refer to the appropriate docs page to learn more about it."
     },

docs/translations/api-docs/charts/heatmap/heatmap.json

@@ -35,9 +35,6 @@
       "description": "The callback fired when the highlighted item changes.",
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json

@@ -54,9 +54,6 @@
       "description": "Callback fired when the zoom has changed.",
       "typeDescriptions": { "zoomData": "Updated zoom data." }
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/line-chart/line-chart.json

@@ -50,9 +50,6 @@
     },
     "onLineClick": { "description": "Callback fired when a line element is clicked." },
     "onMarkClick": { "description": "Callback fired when a mark element is clicked." },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/pie-chart/pie-chart.json

@@ -24,9 +24,6 @@
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
     "onItemClick": { "description": "Callback fired when a pie arc is clicked." },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "series": {
       "description": "The series to display in the pie chart. An array of <a href='/x/api/charts/pie-series-type/'>PieSeriesType</a> objects."
     },

docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json

@@ -48,9 +48,6 @@
       "description": "Callback fired when the zoom has changed.",
       "typeDescriptions": { "zoomData": "Updated zoom data." }
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/scatter-chart/scatter-chart.json

@@ -44,9 +44,6 @@
         "scatterItemIdentifier": "The scatter item identifier."
       }
     },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "rightAxis": {
       "description": "Indicate which axis to display the right of the charts. Can be a string (the id of the axis) or an object <code>ChartsYAxisProps</code>."
     },

docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json

@@ -26,9 +26,6 @@
       "typeDescriptions": { "highlightedItem": "The newly highlighted item." }
     },
     "plotType": { "description": "Type of plot used." },
-    "resolveSizeBeforeRender": {
-      "description": "The chart will try to wait for the parent container to resolve its size before it renders for the first time.<br>This can be useful in some scenarios where the chart appear to grow after the first render, like when used inside a grid."
-    },
     "showHighlight": {
       "description": "Set to <code>true</code> to highlight the value. With line, it shows a point. With bar, it shows a highlight band."
     },

packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx

@@ -243,16 +243,6 @@ BarChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: 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`.

packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx

@@ -95,16 +95,6 @@ ChartContainerPro.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.

packages/x-charts-pro/src/Heatmap/Heatmap.tsx

@@ -286,16 +286,6 @@ Heatmap.propTypes = {
    * @param {HighlightItemData | null} highlightedItem  The newly highlighted item.
    */
   onHighlightChange: 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`.

packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx

@@ -314,16 +314,6 @@ LineChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: 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`.

packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx

@@ -175,16 +175,6 @@ ScatterChartPro.propTypes = {
    * @param {ZoomData[]} zoomData Updated zoom data.
    */
   onZoomChange: 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`.

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

@@ -261,16 +261,6 @@ BarChart.propTypes = {
    * @param {BarItemIdentifier} barItemIdentifier The bar 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`.

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

@@ -81,16 +81,6 @@ 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.

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

@@ -34,15 +34,15 @@ export const ResizableContainerRoot = styled('div', {
  * @ignore - do not document.
  */
 function ResizableContainer(props: { children: React.ReactNode }) {
-  const { inHeight, inWidth, hasIntrinsicSize, containerRef } = useSize();
+  const { inHeight, inWidth, containerRef } = useSize();
 
   return (
     <ResizableContainerRoot
       {...props}
       ownerState={{ width: inWidth, height: inHeight }}
       ref={containerRef}
     >
-      {hasIntrinsicSize && props.children}
+      {props.children}
     </ResizableContainerRoot>
   );
 }

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

@@ -7,6 +7,7 @@ import { useAxisEvents } from '../hooks/useAxisEvents';
 import { ChartsAxesGradients } from '../internals/components/ChartsAxesGradients';
 import { useDrawingArea } from '../hooks';
 import { useSurfaceRef } from '../context/SvgRefProvider';
+import { useSize } from '../context/SizeProvider';
 
 export interface ChartsSurfaceProps {
   className?: string;
@@ -36,6 +37,7 @@ const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(functi
   ref: React.Ref<SVGSVGElement>,
 ) {
   const { width, height, left, right, top, bottom } = useDrawingArea();
+  const { hasIntrinsicSize } = useSize();
   const surfaceRef = useSurfaceRef();
   const handleRef = useForkRef(surfaceRef, ref);
   const themeProps = useThemeProps({ props: inProps, name: 'MuiChartsSurface' });
@@ -56,8 +58,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}
@@ -66,7 +66,7 @@ const ChartsSurface = React.forwardRef<SVGSVGElement, ChartsSurfaceProps>(functi
       {title && <title>{title}</title>}
       {desc && <desc>{desc}</desc>}
       <ChartsAxesGradients />
-      {children}
+      {hasIntrinsicSize && children}
     </ChartsSurfaceStyles>
   );
 });

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

@@ -296,16 +296,6 @@ 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`.