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.