diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md index 52aa6512baca..5fe6c6f9c75e 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/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. diff --git a/docs/pages/x/api/charts/bar-chart-pro.json b/docs/pages/x/api/charts/bar-chart-pro.json index acc058881031..202c0e1a1544 100644 --- a/docs/pages/x/api/charts/bar-chart-pro.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index d6224e22275c..6d95694c7694 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/chart-container-pro.json b/docs/pages/x/api/charts/chart-container-pro.json index ddebdaf446dc..32ee3b1e532e 100644 --- a/docs/pages/x/api/charts/chart-container-pro.json +++ b/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": { diff --git a/docs/pages/x/api/charts/chart-container.json b/docs/pages/x/api/charts/chart-container.json index 48e77d7b691d..3f592ff3b587 100644 --- a/docs/pages/x/api/charts/chart-container.json +++ b/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": { diff --git a/docs/pages/x/api/charts/heatmap.json b/docs/pages/x/api/charts/heatmap.json index 73e966a09c05..333f0c5ea659 100644 --- a/docs/pages/x/api/charts/heatmap.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/line-chart-pro.json b/docs/pages/x/api/charts/line-chart-pro.json index 7877f00b1b6e..f2f0491e3ea5 100644 --- a/docs/pages/x/api/charts/line-chart-pro.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index a1e466ccdc81..f7862a09a001 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 935c0d74a230..41b20f6e27f9 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/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": { diff --git a/docs/pages/x/api/charts/scatter-chart-pro.json b/docs/pages/x/api/charts/scatter-chart-pro.json index 4a25cf42ad78..e9aa9a25aa8e 100644 --- a/docs/pages/x/api/charts/scatter-chart-pro.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index bdef64f943c6..d647c8234b40 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/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
| string" }, "default": "null" diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index ef163ec9fc38..4b8753568039 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -36,7 +36,6 @@ "type": { "name": "enum", "description": "'bar'
| '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" } }, diff --git a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json b/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json index 35449be42f22..7b30aa9f4c6d 100644 --- a/docs/translations/api-docs/charts/bar-chart-pro/bar-chart-pro.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/bar-chart/bar-chart.json b/docs/translations/api-docs/charts/bar-chart/bar-chart.json index 404a7482233d..684ba329429b 100644 --- a/docs/translations/api-docs/charts/bar-chart/bar-chart.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json b/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json index 9d98438a058a..3adf5b2e91ce 100644 --- a/docs/translations/api-docs/charts/chart-container-pro/chart-container-pro.json +++ b/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.
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." }, diff --git a/docs/translations/api-docs/charts/chart-container/chart-container.json b/docs/translations/api-docs/charts/chart-container/chart-container.json index 4f5ba3a0d81f..a15bc34c6f24 100644 --- a/docs/translations/api-docs/charts/chart-container/chart-container.json +++ b/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.
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." }, diff --git a/docs/translations/api-docs/charts/heatmap/heatmap.json b/docs/translations/api-docs/charts/heatmap/heatmap.json index c693b034952f..8db3fec541fc 100644 --- a/docs/translations/api-docs/charts/heatmap/heatmap.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json b/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json index 8e00228baa7e..e331e549cdbc 100644 --- a/docs/translations/api-docs/charts/line-chart-pro/line-chart-pro.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/line-chart/line-chart.json b/docs/translations/api-docs/charts/line-chart/line-chart.json index 0a0fb2b72a47..8b166a32278f 100644 --- a/docs/translations/api-docs/charts/line-chart/line-chart.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/pie-chart/pie-chart.json b/docs/translations/api-docs/charts/pie-chart/pie-chart.json index d048f9dc8830..837389853351 100644 --- a/docs/translations/api-docs/charts/pie-chart/pie-chart.json +++ b/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.
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 PieSeriesType objects." }, diff --git a/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json b/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json index d48fa62f7b10..1ec6c60e26b4 100644 --- a/docs/translations/api-docs/charts/scatter-chart-pro/scatter-chart-pro.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json index 1c03adc3330f..f9aba25321b7 100644 --- a/docs/translations/api-docs/charts/scatter-chart/scatter-chart.json +++ b/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.
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 ChartsYAxisProps." }, diff --git a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json index eb03c7e7457b..24e7cb1b996b 100644 --- a/docs/translations/api-docs/charts/spark-line-chart/spark-line-chart.json +++ b/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.
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 true to highlight the value. With line, it shows a point. With bar, it shows a highlight band." }, diff --git a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx b/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx index cf06bc9b1cd9..bac0f2306e56 100644 --- a/packages/x-charts-pro/src/BarChartPro/BarChartPro.tsx +++ b/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`. diff --git a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx b/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx index a007a28485a5..4b77a752926a 100644 --- a/packages/x-charts-pro/src/ChartContainerPro/ChartContainerPro.tsx +++ b/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. diff --git a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx b/packages/x-charts-pro/src/Heatmap/Heatmap.tsx index fa6afbe1c682..c430cd6674c5 100644 --- a/packages/x-charts-pro/src/Heatmap/Heatmap.tsx +++ b/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`. diff --git a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx b/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx index 45b21e15c2eb..fbd60d08f188 100644 --- a/packages/x-charts-pro/src/LineChartPro/LineChartPro.tsx +++ b/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`. diff --git a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx b/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx index 5e50274d373c..56cdfd6bc7d7 100644 --- a/packages/x-charts-pro/src/ScatterChartPro/ScatterChartPro.tsx +++ b/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`. diff --git a/packages/x-charts/src/BarChart/BarChart.tsx b/packages/x-charts/src/BarChart/BarChart.tsx index 9a0fb4abebb2..9df325e00349 100644 --- a/packages/x-charts/src/BarChart/BarChart.tsx +++ b/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`. diff --git a/packages/x-charts/src/ChartContainer/ChartContainer.tsx b/packages/x-charts/src/ChartContainer/ChartContainer.tsx index 0f34ea4c88a7..64c82944b3d9 100644 --- a/packages/x-charts/src/ChartContainer/ChartContainer.tsx +++ b/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. diff --git a/packages/x-charts/src/ChartContainer/ResizableContainer.tsx b/packages/x-charts/src/ChartContainer/ResizableContainer.tsx index aacc203af003..e5c0f57d42a0 100644 --- a/packages/x-charts/src/ChartContainer/ResizableContainer.tsx +++ b/packages/x-charts/src/ChartContainer/ResizableContainer.tsx @@ -34,7 +34,7 @@ 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 ( - {hasIntrinsicSize && props.children} + {props.children} ); } diff --git a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx b/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx index 9939f798d1b3..c8ffec6abace 100644 --- a/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx +++ b/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(functi ref: React.Ref, ) { 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(functi return ( (functi {title && {title}} {desc && {desc}} - {children} + {hasIntrinsicSize && children} ); }); diff --git a/packages/x-charts/src/LineChart/LineChart.tsx b/packages/x-charts/src/LineChart/LineChart.tsx index 8da4a8e59f1d..f9e74e7043dc 100644 --- a/packages/x-charts/src/LineChart/LineChart.tsx +++ b/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`. diff --git a/packages/x-charts/src/PieChart/PieChart.tsx b/packages/x-charts/src/PieChart/PieChart.tsx index 28c41b7bfd44..49e1ccd3816d 100644 --- a/packages/x-charts/src/PieChart/PieChart.tsx +++ b/packages/x-charts/src/PieChart/PieChart.tsx @@ -210,16 +210,6 @@ PieChart.propTypes = { * Callback fired when a pie arc is clicked. */ 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, /** * The series to display in the pie chart. * An array of [[PieSeriesType]] objects. diff --git a/packages/x-charts/src/ScatterChart/ScatterChart.tsx b/packages/x-charts/src/ScatterChart/ScatterChart.tsx index 951ed860ef70..686bda969083 100644 --- a/packages/x-charts/src/ScatterChart/ScatterChart.tsx +++ b/packages/x-charts/src/ScatterChart/ScatterChart.tsx @@ -250,16 +250,6 @@ ScatterChart.propTypes = { * @param {ScatterItemIdentifier} scatterItemIdentifier The scatter 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`. diff --git a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx index c08f0a2942b4..ed53fbff42e3 100644 --- a/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx +++ b/packages/x-charts/src/SparkLineChart/SparkLineChart.tsx @@ -317,16 +317,6 @@ SparkLineChart.propTypes = { * @default 'line' */ plotType: PropTypes.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.bool, /** * Set to `true` to highlight the value. * With line, it shows a point. diff --git a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx index 2f4e5e5d1e34..5f7618e39f85 100644 --- a/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx +++ b/packages/x-charts/src/context/ChartDataProvider/ChartDataProvider.tsx @@ -126,16 +126,6 @@ ChartDataProvider.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. diff --git a/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts b/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts index a3c77fe7801f..a6986cd76bd4 100644 --- a/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts +++ b/packages/x-charts/src/context/ChartDataProvider/useChartDataProviderProps.ts @@ -26,7 +26,6 @@ export const useChartDataProviderProps = (props: ChartDataProviderProps) => { plugins, children, skipAnimation, - resolveSizeBeforeRender, } = props; const [defaultizedXAxis, defaultizedYAxis] = useDefaultizeAxis(xAxis, yAxis, dataset); @@ -68,7 +67,6 @@ export const useChartDataProviderProps = (props: ChartDataProviderProps) => { const sizeProviderProps: Omit = { width, height, - resolveSizeBeforeRender, }; return { diff --git a/packages/x-charts/src/context/SizeProvider/Size.types.ts b/packages/x-charts/src/context/SizeProvider/Size.types.ts index ea93098aa2cc..811e5dcd498d 100644 --- a/packages/x-charts/src/context/SizeProvider/Size.types.ts +++ b/packages/x-charts/src/context/SizeProvider/Size.types.ts @@ -9,16 +9,6 @@ export interface SizeProviderProps { * The height of the chart in px. If not defined, it takes the height of the parent element. */ height?: number; - /** - * 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?: boolean; children: React.ReactNode; } diff --git a/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx b/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx index 7b704a92931b..6b42cc557a85 100644 --- a/packages/x-charts/src/context/SizeProvider/SizeProvider.tsx +++ b/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( () => ({ diff --git a/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts b/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts index e22bd75bdadf..032af4225d68 100644 --- a/packages/x-charts/src/context/SizeProvider/useChartContainerDimensions.ts +++ b/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(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,7 +108,6 @@ export const useChartContainerDimensions = ( stateRef.current.displayError = false; } } - const finalWidth = inWidth ?? width; const finalHeight = inHeight ?? height; @@ -119,7 +115,7 @@ export const useChartContainerDimensions = ( containerRef: rootRef, width: finalWidth, height: finalHeight, - hasIntrinsicSize: Boolean(finalWidth && finalHeight), + hasIntrinsicSize: finalWidth > 0 && finalHeight > 0, inWidth, inHeight, };