[charts] Fix LineChart animation being stuck with initial drawing a…

…rea value (mui#14553)

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

@@ -80,6 +80,7 @@
         "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

@@ -73,6 +73,7 @@
         "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/heatmap.json

@@ -61,6 +61,7 @@
         "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

@@ -73,6 +73,7 @@
         "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

@@ -66,6 +66,7 @@
     },
     "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

@@ -61,6 +61,7 @@
       }
     },
     "onItemClick": { "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/responsive-chart-container-pro.json

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

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

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

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

@@ -69,6 +69,7 @@
         "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

@@ -62,6 +62,7 @@
         "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,6 +36,7 @@
       "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" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },

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

@@ -56,6 +56,9 @@
       "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

@@ -52,6 +52,9 @@
         "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/heatmap/heatmap.json

@@ -35,6 +35,9 @@
       "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

@@ -53,6 +53,9 @@
       "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

@@ -49,6 +49,9 @@
     },
     "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

@@ -34,6 +34,9 @@
       "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."
+    },
     "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/responsive-chart-container-pro/responsive-chart-container-pro.json

@@ -28,6 +28,9 @@
     "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/responsive-chart-container/responsive-chart-container.json

@@ -24,6 +24,9 @@
     "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/scatter-chart-pro/scatter-chart-pro.json

@@ -47,6 +47,9 @@
       "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

@@ -43,6 +43,9 @@
         "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,6 +26,9 @@
       "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

@@ -230,6 +230,16 @@ 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/Heatmap/Heatmap.tsx

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

@@ -251,6 +251,16 @@ 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/ResponsiveChartContainerPro/ResponsiveChartContainerPro.tsx

@@ -93,6 +93,16 @@ ResponsiveChartContainerPro.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/ScatterChartPro/ScatterChartPro.tsx

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

@@ -291,6 +291,16 @@ 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/LineChart/AnimatedLine.tsx

@@ -48,19 +48,21 @@ export interface AnimatedLineProps extends React.ComponentPropsWithoutRef<'path'
  */
 function AnimatedLine(props: AnimatedLineProps) {
   const { d, skipAnimation, ownerState, ...other } = props;
-  const { left, top, bottom, width, height, right } = useDrawingArea();
+  const drawingArea = useDrawingArea();
   const chartId = useChartId();
 
   const stringInterpolator = useStringInterpolator(d);
 
-  const transitionAppear = useTransition([1], {
-    from: { animatedWidth: left },
-    to: { animatedWidth: width + left + right },
-    enter: { animatedWidth: width + left + right },
-    leave: { animatedWidth: left },
-    reset: false,
-    immediate: skipAnimation,
-  });
+  const transitionAppear = useTransition<typeof drawingArea, { animatedWidth: number }>(
+    [drawingArea],
+    {
+      from: (v) => ({ animatedWidth: v.left }),
+      enter: (v) => ({ animatedWidth: v.width + v.left + v.right }),
+      leave: (v) => ({ animatedWidth: v.width + v.left + v.right }),
+      reset: false,
+      immediate: skipAnimation,
+    },
+  );
 
   const transitionChange = useTransition([stringInterpolator], {
     from: { value: 0 },
@@ -75,7 +77,12 @@ function AnimatedLine(props: AnimatedLineProps) {
     <React.Fragment>
       <clipPath id={clipId}>
         {transitionAppear((style) => (
-          <animated.rect x={0} y={0} width={style.animatedWidth} height={top + height + bottom} />
+          <animated.rect
+            x={0}
+            y={0}
+            width={style.animatedWidth}
+            height={drawingArea.top + drawingArea.height + drawingArea.bottom}
+          />
         ))}
       </clipPath>
       <g clipPath={`url(#${clipId})`}>

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

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

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

@@ -328,6 +328,16 @@ 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,
   /**
    * Indicate which axis to display the right of the charts.
    * Can be a string (the id of the axis) or an object `ChartsYAxisProps`.