[charts] Add line animation

docs/data/charts/lines/ConnectNulls.js

@@ -31,6 +31,7 @@ export default function ConnectNulls() {
         ]}
         height={200}
         margin={{ top: 10, bottom: 20 }}
+        skipAnimation
       />
     </Stack>
   );

docs/data/charts/lines/ConnectNulls.tsx

@@ -31,6 +31,7 @@ export default function ConnectNulls() {
         ]}
         height={200}
         margin={{ top: 10, bottom: 20 }}
+        skipAnimation
       />
     </Stack>
   );

docs/data/charts/lines/InterpolationDemoNoSnap.js

@@ -52,6 +52,7 @@ export default function InterpolationDemoNoSnap() {
         ]}
         height={300}
         margin={{ top: 10, bottom: 30 }}
+        skipAnimation
       />
       <HighlightedCode code={getExample(curveType)} language="tsx" />
     </Box>

docs/data/charts/lines/LineAnimation.js

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { mangoFusionPalette } from '@mui/x-charts/colorPalettes';
+
+const defaultSeries = [
+  { id: '1', data: [4, 5, 1, 2, 3, 3, 2], area: true, stack: '1' },
+  { id: '2', data: [7, 4, 6, 7, 2, 3, 5], area: true, stack: '1' },
+  { id: '3', data: [6, 4, 1, 2, 6, 3, 3], area: true, stack: '1' },
+  { id: '4', data: [4, 7, 6, 1, 2, 7, 7], area: true, stack: '1' },
+  { id: '5', data: [2, 2, 1, 7, 1, 5, 3], area: true, stack: '1' },
+  { id: '6', data: [6, 6, 1, 6, 7, 1, 1], area: true, stack: '1' },
+  { id: '7', data: [7, 6, 1, 6, 4, 4, 6], area: true, stack: '1' },
+  { id: '8', data: [4, 3, 1, 6, 6, 3, 5], area: true, stack: '1' },
+  { id: '9', data: [7, 6, 2, 7, 4, 2, 7], area: true, stack: '1' },
+].map((item, index) => ({
+  ...item,
+  color: mangoFusionPalette('light')[index],
+}));
+
+export default function LineAnimation() {
+  const [series, setSeries] = React.useState(defaultSeries);
+  const [nbSeries, setNbSeries] = React.useState(3);
+  const [skipAnimation, setSkipAnimation] = React.useState(false);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div>
+        <LineChart
+          xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7] }]}
+          series={[
+            ...series.slice(0, Math.min(nbSeries, 8)),
+            ...series.slice(8, 10),
+          ]}
+          skipAnimation={skipAnimation}
+          height={400}
+        />
+      </div>
+      <Stack spacing={1} direction="row">
+        <Button
+          variant="outlined"
+          onClick={() =>
+            setSeries((prev) =>
+              prev.map((item) => ({
+                ...item,
+                data: item.data.map((v) => Math.max(0.5, v - 4 + 8 * Math.random())),
+              })),
+            )
+          }
+        >
+          randomize
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() => setNbSeries((prev) => prev - 1)}
+          disabled={nbSeries === 0}
+        >
+          remove
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() => setNbSeries((prev) => prev + 1)}
+          disabled={nbSeries === 8}
+        >
+          add
+        </Button>
+        <FormControlLabel
+          checked={skipAnimation}
+          control={
+            <Checkbox onChange={(event) => setSkipAnimation(event.target.checked)} />
+          }
+          label="skipAnimation"
+          labelPlacement="end"
+        />
+      </Stack>
+    </div>
+  );
+}

docs/data/charts/lines/LineAnimation.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import { LineChart } from '@mui/x-charts/LineChart';
+import { mangoFusionPalette } from '@mui/x-charts/colorPalettes';
+
+const defaultSeries = [
+  { id: '1', data: [4, 5, 1, 2, 3, 3, 2], area: true, stack: '1' },
+  { id: '2', data: [7, 4, 6, 7, 2, 3, 5], area: true, stack: '1' },
+  { id: '3', data: [6, 4, 1, 2, 6, 3, 3], area: true, stack: '1' },
+  { id: '4', data: [4, 7, 6, 1, 2, 7, 7], area: true, stack: '1' },
+  { id: '5', data: [2, 2, 1, 7, 1, 5, 3], area: true, stack: '1' },
+  { id: '6', data: [6, 6, 1, 6, 7, 1, 1], area: true, stack: '1' },
+  { id: '7', data: [7, 6, 1, 6, 4, 4, 6], area: true, stack: '1' },
+  { id: '8', data: [4, 3, 1, 6, 6, 3, 5], area: true, stack: '1' },
+  { id: '9', data: [7, 6, 2, 7, 4, 2, 7], area: true, stack: '1' },
+].map((item, index) => ({
+  ...item,
+  color: mangoFusionPalette('light')[index],
+}));
+
+export default function LineAnimation() {
+  const [series, setSeries] = React.useState(defaultSeries);
+  const [nbSeries, setNbSeries] = React.useState(3);
+  const [skipAnimation, setSkipAnimation] = React.useState(false);
+
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div>
+        <LineChart
+          xAxis={[{ data: [1, 2, 3, 4, 5, 6, 7] }]}
+          series={[
+            ...series.slice(0, Math.min(nbSeries, 8)),
+            ...series.slice(8, 10),
+          ]}
+          skipAnimation={skipAnimation}
+          height={400}
+        />
+      </div>
+      <Stack spacing={1} direction="row">
+        <Button
+          variant="outlined"
+          onClick={() =>
+            setSeries((prev) =>
+              prev.map((item) => ({
+                ...item,
+                data: item.data.map((v) => Math.max(0.5, v - 4 + 8 * Math.random())),
+              })),
+            )
+          }
+        >
+          randomize
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() => setNbSeries((prev) => prev - 1)}
+          disabled={nbSeries === 0}
+        >
+          remove
+        </Button>
+        <Button
+          variant="outlined"
+          onClick={() => setNbSeries((prev) => prev + 1)}
+          disabled={nbSeries === 8}
+        >
+          add
+        </Button>
+        <FormControlLabel
+          checked={skipAnimation}
+          control={
+            <Checkbox onChange={(event) => setSkipAnimation(event.target.checked)} />
+          }
+          label="skipAnimation"
+          labelPlacement="end"
+        />
+      </Stack>
+    </div>
+  );
+}

docs/data/charts/lines/lines.md

@@ -142,3 +142,30 @@ sx={{
 ```
 
 {{"demo": "CSSCustomization.js"}}
+
+## Animation
+
+To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
+When set to `true` it skips animation powered by `@react-spring/web`.
+
+Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+
+:::warning
+If you support interactive way to add or remove series from your chart, you have to provide series' id.
+
+Otherwise the chart will have no way to know if you are modifying, removing, or adding some series.
+Ths will lead to strange behaviors.
+:::
+
+```jsx
+// For a single component chart
+<LineChart skipAnimation />
+
+// For a composed chart
+<ResponsiveChartContainer>
+  <LinePlot skipAnimation />
+  <AreaPlot skipAnimation />
+</ResponsiveChartContainer>
+```
+
+{{"demo": "LineAnimation.js"}}

docs/pages/x/api/charts/area-element.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

docs/pages/x/api/charts/area-plot.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

docs/pages/x/api/charts/default-charts-axis-tooltip-content.json

@@ -4,7 +4,7 @@
     "axisData": {
       "type": {
         "name": "shape",
-        "description": "{ x?: { index?: number, value: Date<br>&#124;&nbsp;number }, y?: { index?: number, value: Date<br>&#124;&nbsp;number } }"
+        "description": "{ x?: { index?: number, value: Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string }, y?: { index?: number, value: Date<br>&#124;&nbsp;number<br>&#124;&nbsp;string } }"
       },
       "required": true
     },

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

@@ -43,6 +43,7 @@
       },
       "default": "null"
     },
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },
@@ -81,7 +82,12 @@
     { "name": "axisTickLabel", "description": "", "class": null },
     { "name": "axisLabel", "description": "", "class": null },
     { "name": "area", "description": "", "class": null },
-    { "name": "line", "description": "", "class": null },
+    {
+      "name": "line",
+      "description": "The component that renders the root.",
+      "default": "LineElementPath",
+      "class": null
+    },
     { "name": "mark", "description": "", "class": null },
     { "name": "lineHighlight", "description": "", "class": null },
     { "name": "legend", "description": "", "class": null },

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

@@ -1,5 +1,6 @@
 {
   "props": {
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },
@@ -12,6 +13,14 @@
     "import { LineElement } from '@mui/x-charts/LineChart';",
     "import { LineElement } from '@mui/x-charts';"
   ],
+  "slots": [
+    {
+      "name": "line",
+      "description": "The component that renders the root.",
+      "default": "LineElementPath",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "faded",

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

@@ -1,5 +1,6 @@
 {
   "props": {
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },
@@ -12,7 +13,14 @@
     "import { LinePlot } from '@mui/x-charts/LineChart';",
     "import { LinePlot } from '@mui/x-charts';"
   ],
-  "slots": [{ "name": "line", "description": "", "class": null }],
+  "slots": [
+    {
+      "name": "line",
+      "description": "The component that renders the root.",
+      "default": "LineElementPath",
+      "class": null
+    }
+  ],
   "classes": [],
   "muiName": "MuiLinePlot",
   "filename": "/packages/x-charts/src/LineChart/LinePlot.tsx",

docs/pages/x/api/charts/mark-element.json

@@ -7,7 +7,8 @@
         "description": "'circle'<br>&#124;&nbsp;'cross'<br>&#124;&nbsp;'diamond'<br>&#124;&nbsp;'square'<br>&#124;&nbsp;'star'<br>&#124;&nbsp;'triangle'<br>&#124;&nbsp;'wye'"
       },
       "required": true
-    }
+    },
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" }
   },
   "name": "MarkElement",
   "imports": [

docs/pages/x/api/charts/mark-plot.json

@@ -1,5 +1,6 @@
 {
   "props": {
+    "skipAnimation": { "type": { "name": "bool" }, "default": "false" },
     "slotProps": { "type": { "name": "object" }, "default": "{}" },
     "slots": {
       "type": { "name": "object" },

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

@@ -55,7 +55,12 @@
   ],
   "slots": [
     { "name": "area", "description": "", "class": null },
-    { "name": "line", "description": "", "class": null },
+    {
+      "name": "line",
+      "description": "The component that renders the root.",
+      "default": "LineElementPath",
+      "class": null
+    },
     { "name": "mark", "description": "", "class": null },
     { "name": "lineHighlight", "description": "", "class": null },
     { "name": "bar", "description": "", "class": null },

docs/translations/api-docs/charts/area-element/area-element.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "skipAnimation": { "description": "If <code>true</code>, animations are skiped." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." }
   },

docs/translations/api-docs/charts/area-plot/area-plot.json

@@ -1,6 +1,7 @@
 {
   "componentDescription": "",
   "propDescriptions": {
+    "skipAnimation": { "description": "If <code>true</code>, animations are skiped." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." }
   },

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

@@ -29,6 +29,7 @@
     "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>."
     },
+    "skipAnimation": { "description": "If <code>true</code>, animations are skiped." },
     "slotProps": { "description": "The props used for each component slot." },
     "slots": { "description": "Overridable component slots." },
     "topAxis": {
@@ -54,7 +55,7 @@
     "axisTickLabel": "",
     "itemContent": "",
     "legend": "",
-    "line": "",
+    "line": "The component that renders the root.",
     "lineHighlight": "",
     "mark": "",
     "popper": ""