[docs] Add demo for Scatter Chart with linked points

docs/data/charts/scatter/CustomScatter.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
+
+const data1 = [
+  { x: 95, 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 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 || !scatter.series[seriesId]) {
+    return null;
+  }
+  const { color, data } = scatter.series[seriesId];
+
+  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 CustomScatter() {
+  return (
+    <ScatterChart series={series} width={500} height={300}>
+      <LinkPoints seriesId="s1" />
+      <LinkPoints seriesId="s2" close />
+    </ScatterChart>
+  );
+}

docs/data/charts/scatter/CustomScatter.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { ScatterChart } from '@mui/x-charts/ScatterChart';
+import { useScatterSeries, useXScale, useYScale } from '@mui/x-charts/hooks';
+
+const data1 = [
+  { x: 95, 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 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 || !scatter.series[seriesId]) {
+    return null;
+  }
+  const { color, data } = scatter.series[seriesId];
+
+  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 CustomScatter() {
+  return (
+    <ScatterChart series={series} width={500} height={300}>
+      <LinkPoints seriesId="s1" />
+      <LinkPoints seriesId="s2" close />
+    </ScatterChart>
+  );
+}

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>

docs/data/charts/scatter/scatter.md

@@ -116,3 +116,14 @@ 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"}}