From 2e98ccc62989b93f0d3ee7e79508a581cb8f0330 Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <Bernardo.belchior1@gmail.com>
Date: Wed, 5 Feb 2025 09:33:28 +0100
Subject: [PATCH 1/4] [docs] Add demo for Scatter Chart with linked points

---
 .../scatter-demo/LinkPointsScatterChart.js    | 77 +++++++++++++++++++
 .../scatter-demo/LinkPointsScatterChart.tsx   | 76 ++++++++++++++++++
 docs/data/charts/scatter-demo/scatter-demo.md |  4 +
 3 files changed, 157 insertions(+)
 create mode 100644 docs/data/charts/scatter-demo/LinkPointsScatterChart.js
 create mode 100644 docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx

diff --git a/docs/data/charts/scatter-demo/LinkPointsScatterChart.js b/docs/data/charts/scatter-demo/LinkPointsScatterChart.js
new file mode 100644
index 0000000000000..1f3da3cd22f61
--- /dev/null
+++ b/docs/data/charts/scatter-demo/LinkPointsScatterChart.js
@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
+
+const data1 = [
+  { x: 100, y: 200, id: 1 },
+  { x: 120, y: 100, id: 2 },
+  { x: 170, y: 300, id: 3 },
+  { x: 140, y: 250, id: 4 },
+  { x: 150, y: 400, id: 5 },
+  { x: 110, y: 280, id: 6 },
+];
+
+const data2 = [
+  { x: 300, y: 300, id: 1 },
+  { x: 200, y: 700, id: 2 },
+  { x: 400, y: 500, id: 3 },
+  { x: 340, y: 350, id: 4 },
+  { x: 420, y: 280, id: 5 },
+];
+
+const chartSetting = {
+  width: 500,
+  height: 300,
+};
+
+function LinkPoints({ seriesId, close }) {
+  const scatter = useScatterSeries();
+  const xScale = useXScale();
+  const yScale = useYScale();
+
+  if (!scatter) {
+    return null;
+  }
+
+  const color = scatter.series[seriesId]?.color;
+  const data = scatter.series[seriesId]?.data;
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <path
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      d={`M ${data.map(({ x, y }) => `${xScale(x)}, ${yScale(y)}`).join(' L')}${
+        close ? 'Z' : ''
+      }`}
+    />
+  );
+}
+
+export default function LinkPointsScatterChart() {
+  return (
+    <ScatterChart
+      series={[
+        {
+          id: 's1',
+          data: data1,
+          label: 'Open',
+        },
+        {
+          data: data2,
+          id: 's2',
+          label: 'Closed',
+        },
+      ]}
+      xAxis={[{ min: 0 }]}
+      {...chartSetting}
+    >
+      <LinkPoints seriesId="s1" />
+      <LinkPoints seriesId="s2" close />
+    </ScatterChart>
+  );
+}
diff --git a/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx b/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
new file mode 100644
index 0000000000000..dd2ec5e38576c
--- /dev/null
+++ b/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
+
+const data1 = [
+  { x: 100, y: 200, id: 1 },
+  { x: 120, y: 100, id: 2 },
+  { x: 170, y: 300, id: 3 },
+  { x: 140, y: 250, id: 4 },
+  { x: 150, y: 400, id: 5 },
+  { x: 110, y: 280, id: 6 },
+];
+const data2 = [
+  { x: 300, y: 300, id: 1 },
+  { x: 200, y: 700, id: 2 },
+  { x: 400, y: 500, id: 3 },
+  { x: 340, y: 350, id: 4 },
+  { x: 420, y: 280, id: 5 },
+];
+
+const chartSetting = {
+  width: 500,
+  height: 300,
+};
+
+function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean }) {
+  const scatter = useScatterSeries();
+  const xScale = useXScale();
+  const yScale = useYScale();
+
+  if (!scatter) {
+    return null;
+  }
+
+  const color = scatter.series[seriesId]?.color;
+  const data = scatter.series[seriesId]?.data;
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <path
+      fill="none"
+      stroke={color}
+      strokeWidth={2}
+      d={`M ${data.map(({ x, y }) => `${xScale(x)}, ${yScale(y)}`).join(' L')}${
+        close ? 'Z' : ''
+      }`}
+    />
+  );
+}
+
+export default function LinkPointsScatterChart() {
+  return (
+    <ScatterChart
+      series={[
+        {
+          id: 's1',
+          data: data1,
+          label: 'Open',
+        },
+        {
+          data: data2,
+          id: 's2',
+          label: 'Closed',
+        },
+      ]}
+      xAxis={[{ min: 0 }]}
+      {...chartSetting}
+    >
+      <LinkPoints seriesId="s1" />
+      <LinkPoints seriesId="s2" close />
+    </ScatterChart>
+  );
+}
diff --git a/docs/data/charts/scatter-demo/scatter-demo.md b/docs/data/charts/scatter-demo/scatter-demo.md
index e79507a54b6c4..129503dbf8208 100644
--- a/docs/data/charts/scatter-demo/scatter-demo.md
+++ b/docs/data/charts/scatter-demo/scatter-demo.md
@@ -15,3 +15,7 @@ components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler
 ## MultipleYAxesScatterChart
 
 {{"demo": "MultipleYAxesScatterChart.js"}}
+
+## LinkPointsScatterChart
+
+{{"demo": "LinkPointsScatterChart.js"}}
\ No newline at end of file

From 33fd8f6dcb3908a2432fafa973fe235da5710dc0 Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <Bernardo.belchior1@gmail.com>
Date: Wed, 5 Feb 2025 09:40:17 +0100
Subject: [PATCH 2/4] Inline chartSetting

---
 docs/data/charts/scatter-demo/LinkPointsScatterChart.js  | 8 ++------
 docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx | 8 ++------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/docs/data/charts/scatter-demo/LinkPointsScatterChart.js b/docs/data/charts/scatter-demo/LinkPointsScatterChart.js
index 1f3da3cd22f61..fc5166fa176d7 100644
--- a/docs/data/charts/scatter-demo/LinkPointsScatterChart.js
+++ b/docs/data/charts/scatter-demo/LinkPointsScatterChart.js
@@ -19,11 +19,6 @@ const data2 = [
   { x: 420, y: 280, id: 5 },
 ];
 
-const chartSetting = {
-  width: 500,
-  height: 300,
-};
-
 function LinkPoints({ seriesId, close }) {
   const scatter = useScatterSeries();
   const xScale = useXScale();
@@ -68,7 +63,8 @@ export default function LinkPointsScatterChart() {
         },
       ]}
       xAxis={[{ min: 0 }]}
-      {...chartSetting}
+      width={500}
+      height={300}
     >
       <LinkPoints seriesId="s1" />
       <LinkPoints seriesId="s2" close />
diff --git a/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx b/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
index dd2ec5e38576c..c3e46f92996c4 100644
--- a/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
+++ b/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
@@ -18,11 +18,6 @@ const data2 = [
   { x: 420, y: 280, id: 5 },
 ];
 
-const chartSetting = {
-  width: 500,
-  height: 300,
-};
-
 function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean }) {
   const scatter = useScatterSeries();
   const xScale = useXScale();
@@ -67,7 +62,8 @@ export default function LinkPointsScatterChart() {
         },
       ]}
       xAxis={[{ min: 0 }]}
-      {...chartSetting}
+      width={500}
+      height={300}
     >
       <LinkPoints seriesId="s1" />
       <LinkPoints seriesId="s2" close />

From 95a0bcd0eedc32da67ea4f72acdaa13238a4bfab Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <Bernardo.belchior1@gmail.com>
Date: Wed, 5 Feb 2025 11:11:47 +0100
Subject: [PATCH 3/4] Move demo to scatter overview

---
 docs/data/charts/scatter-demo/scatter-demo.md          |  4 ----
 .../CustomScatter.js}                                  |  2 +-
 .../CustomScatter.tsx}                                 |  2 +-
 docs/data/charts/scatter/scatter.md                    | 10 ++++++++++
 4 files changed, 12 insertions(+), 6 deletions(-)
 rename docs/data/charts/{scatter-demo/LinkPointsScatterChart.js => scatter/CustomScatter.js} (96%)
 rename docs/data/charts/{scatter-demo/LinkPointsScatterChart.tsx => scatter/CustomScatter.tsx} (96%)

diff --git a/docs/data/charts/scatter-demo/scatter-demo.md b/docs/data/charts/scatter-demo/scatter-demo.md
index 129503dbf8208..e79507a54b6c4 100644
--- a/docs/data/charts/scatter-demo/scatter-demo.md
+++ b/docs/data/charts/scatter-demo/scatter-demo.md
@@ -15,7 +15,3 @@ components: Scatter, ScatterChart, ScatterPlot, ChartsVoronoiHandler
 ## MultipleYAxesScatterChart
 
 {{"demo": "MultipleYAxesScatterChart.js"}}
-
-## LinkPointsScatterChart
-
-{{"demo": "LinkPointsScatterChart.js"}}
\ No newline at end of file
diff --git a/docs/data/charts/scatter-demo/LinkPointsScatterChart.js b/docs/data/charts/scatter/CustomScatter.js
similarity index 96%
rename from docs/data/charts/scatter-demo/LinkPointsScatterChart.js
rename to docs/data/charts/scatter/CustomScatter.js
index fc5166fa176d7..273adc0258a70 100644
--- a/docs/data/charts/scatter-demo/LinkPointsScatterChart.js
+++ b/docs/data/charts/scatter/CustomScatter.js
@@ -47,7 +47,7 @@ function LinkPoints({ seriesId, close }) {
   );
 }
 
-export default function LinkPointsScatterChart() {
+export default function CustomScatter() {
   return (
     <ScatterChart
       series={[
diff --git a/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx b/docs/data/charts/scatter/CustomScatter.tsx
similarity index 96%
rename from docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
rename to docs/data/charts/scatter/CustomScatter.tsx
index c3e46f92996c4..4c783a7abc0c1 100644
--- a/docs/data/charts/scatter-demo/LinkPointsScatterChart.tsx
+++ b/docs/data/charts/scatter/CustomScatter.tsx
@@ -46,7 +46,7 @@ function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean })
   );
 }
 
-export default function LinkPointsScatterChart() {
+export default function CustomScatter() {
   return (
     <ScatterChart
       series={[
diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index 06fef0c2cfe2b..22336b120ec98 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -116,3 +116,13 @@ See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information
 ### Shape 🚧
 
 ### Size 🚧
+
+## Plot Customization
+
+You can customize the plotting of the data in a scatter chart by providing custom components as `children` of the `ScatterChart` component.
+
+A scatter chart's series can be accessed through the `useScatterSeries` hook. This hook returns the order of the series and information about the series themselves, including their data points, color, etc.
+
+See [Custom components](/x/react-charts/components/) to learn how to further customize your charts.
+
+{{"demo": "CustomScatter.js"}}

From ee4ca2e8a4f7aea8ffa096edbf252c19ab906f73 Mon Sep 17 00:00:00 2001
From: Bernardo Belchior <Bernardo.belchior1@gmail.com>
Date: Thu, 6 Feb 2025 11:34:55 +0100
Subject: [PATCH 4/4] Address PR feedback

---
 docs/data/charts/scatter/CustomScatter.js     | 31 ++++++-------------
 docs/data/charts/scatter/CustomScatter.tsx    | 30 +++++-------------
 .../charts/scatter/CustomScatter.tsx.preview  |  4 +++
 docs/data/charts/scatter/scatter.md           |  3 +-
 4 files changed, 23 insertions(+), 45 deletions(-)
 create mode 100644 docs/data/charts/scatter/CustomScatter.tsx.preview

diff --git a/docs/data/charts/scatter/CustomScatter.js b/docs/data/charts/scatter/CustomScatter.js
index 273adc0258a70..efa11f3225aef 100644
--- a/docs/data/charts/scatter/CustomScatter.js
+++ b/docs/data/charts/scatter/CustomScatter.js
@@ -3,7 +3,7 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
 
 const data1 = [
-  { x: 100, y: 200, id: 1 },
+  { x: 95, y: 200, id: 1 },
   { x: 120, y: 100, id: 2 },
   { x: 170, y: 300, id: 3 },
   { x: 140, y: 250, id: 4 },
@@ -19,17 +19,20 @@ const data2 = [
   { x: 420, y: 280, id: 5 },
 ];
 
+const series = [
+  { id: 's1', data: data1, label: 'Open' },
+  { id: 's2', data: data2, label: 'Closed' },
+];
+
 function LinkPoints({ seriesId, close }) {
   const scatter = useScatterSeries();
   const xScale = useXScale();
   const yScale = useYScale();
 
-  if (!scatter) {
+  if (!scatter || !scatter.series[seriesId]) {
     return null;
   }
-
-  const color = scatter.series[seriesId]?.color;
-  const data = scatter.series[seriesId]?.data;
+  const { color, data } = scatter.series[seriesId];
 
   if (!data) {
     return null;
@@ -49,23 +52,7 @@ function LinkPoints({ seriesId, close }) {
 
 export default function CustomScatter() {
   return (
-    <ScatterChart
-      series={[
-        {
-          id: 's1',
-          data: data1,
-          label: 'Open',
-        },
-        {
-          data: data2,
-          id: 's2',
-          label: 'Closed',
-        },
-      ]}
-      xAxis={[{ min: 0 }]}
-      width={500}
-      height={300}
-    >
+    <ScatterChart series={series} width={500} height={300}>
       <LinkPoints seriesId="s1" />
       <LinkPoints seriesId="s2" close />
     </ScatterChart>
diff --git a/docs/data/charts/scatter/CustomScatter.tsx b/docs/data/charts/scatter/CustomScatter.tsx
index 4c783a7abc0c1..51035b3aaf334 100644
--- a/docs/data/charts/scatter/CustomScatter.tsx
+++ b/docs/data/charts/scatter/CustomScatter.tsx
@@ -3,7 +3,7 @@ import { ScatterChart } from '@mui/x-charts/ScatterChart';
 import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
 
 const data1 = [
-  { x: 100, y: 200, id: 1 },
+  { x: 95, y: 200, id: 1 },
   { x: 120, y: 100, id: 2 },
   { x: 170, y: 300, id: 3 },
   { x: 140, y: 250, id: 4 },
@@ -17,18 +17,20 @@ const data2 = [
   { x: 340, y: 350, id: 4 },
   { x: 420, y: 280, id: 5 },
 ];
+const series = [
+  { id: 's1', data: data1, label: 'Open' },
+  { id: 's2', data: data2, label: 'Closed' },
+];
 
 function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean }) {
   const scatter = useScatterSeries();
   const xScale = useXScale();
   const yScale = useYScale();
 
-  if (!scatter) {
+  if (!scatter || !scatter.series[seriesId]) {
     return null;
   }
-
-  const color = scatter.series[seriesId]?.color;
-  const data = scatter.series[seriesId]?.data;
+  const { color, data } = scatter.series[seriesId];
 
   if (!data) {
     return null;
@@ -48,23 +50,7 @@ function LinkPoints({ seriesId, close }: { seriesId: string; close?: boolean })
 
 export default function CustomScatter() {
   return (
-    <ScatterChart
-      series={[
-        {
-          id: 's1',
-          data: data1,
-          label: 'Open',
-        },
-        {
-          data: data2,
-          id: 's2',
-          label: 'Closed',
-        },
-      ]}
-      xAxis={[{ min: 0 }]}
-      width={500}
-      height={300}
-    >
+    <ScatterChart series={series} width={500} height={300}>
       <LinkPoints seriesId="s1" />
       <LinkPoints seriesId="s2" close />
     </ScatterChart>
diff --git a/docs/data/charts/scatter/CustomScatter.tsx.preview b/docs/data/charts/scatter/CustomScatter.tsx.preview
new file mode 100644
index 0000000000000..0b09bfd44d573
--- /dev/null
+++ b/docs/data/charts/scatter/CustomScatter.tsx.preview
@@ -0,0 +1,4 @@
+<ScatterChart series={series} width={500} height={300}>
+  <LinkPoints seriesId="s1" />
+  <LinkPoints seriesId="s2" close />
+</ScatterChart>
\ No newline at end of file
diff --git a/docs/data/charts/scatter/scatter.md b/docs/data/charts/scatter/scatter.md
index 22336b120ec98..904e088af4d62 100644
--- a/docs/data/charts/scatter/scatter.md
+++ b/docs/data/charts/scatter/scatter.md
@@ -121,7 +121,8 @@ See [Axis—Grid](/x/react-charts/axis/#grid) documentation for more information
 
 You can customize the plotting of the data in a scatter chart by providing custom components as `children` of the `ScatterChart` component.
 
-A scatter chart's series can be accessed through the `useScatterSeries` hook. This hook returns the order of the series and information about the series themselves, including their data points, color, etc.
+A scatter chart's series can be accessed through the `useScatterSeries` hook.
+This hook returns the order of the series and information about the series themselves, including their data points, color, etc.
 
 See [Custom components](/x/react-charts/components/) to learn how to further customize your charts.