[charts] Scatter Chart allow to link points

[wills01]

The problem in depth

Trying to be able to have lines on scatter chart (Not Trend Lines, I can do this with google charts) so that it draws a box similar to this done with google charts, and then have additional series.

Google Chart Code example code:

import React from "react";
import { Chart } from "react-google-charts";
const data = [
  [
    { type: "number", label: "CG" },
    "Envelope",
    "Weight",
    "Zero Basic Weight",
    { role: "annotation", type: "string" },
    { role: "tooltip", type: "string" },
  ],
  [85, 1800, null, null, null, null],
  [85, 2240, null, null, null, null],
  [89, 2900, null, null, null, null],
  [93, 2900, null, null, null, null],
  [93, 1800, null, null, null, null],
  [85, 1800, null, null, null, null],
  [91.4, null, 2808, null, "TOW", "Take off Weight"],
  [91.1, null, 2598, null, "LDM", "Landing Weight"],
  [91, null, null, 2514, null, null],
];

export const options = {
  title: "Weight and Balance",
  legend: { title: "CG", position: "bottom" },
  hAxis: { minValue: 84, maxValue: 94 },
  vAxis: { title: "Weight", minValue: 1750, maxValue: 3000 },
  lineWidth: 2,
};
export function App() {
  return (
    <Chart
      chartType="ScatterChart"
      width="100%"
      height="400%"
      data={data}
      options={options}
    />
  );
}

Your environment

`npx @mui/envinfo`

``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.11.1 - C:\Program Files\nodejs\node.EXE npm: 10.8.3 - ~\AppData\Roaming\npm\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) npmPackages: @emotion/react: ^11.9.3 => 11.13.0 @emotion/styled: ^11.9.3 => 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.16.7 => 5.16.7 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.173 @mui/material: ^5.16.7 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-charts: ^7.13.0 => 7.13.0 @mui/x-charts-vendor: 7.13.0 @mui/x-data-grid-premium: ^7.13.0 => 7.13.0 @mui/x-internals: 7.13.0 @mui/x-license: 7.13.0 @types/react: ^18.0.26 => 18.3.3 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^4.9.4 => 4.9.5 ```

Search keywords: Scatter Chart Line Order ID: 78711

[alexfauquette]

It's a built in feature, but you could creat a custom component to link points

https://codesandbox.io/p/sandbox/romantic-johnson-fc3vwr?file=%2Fsrc%2FDemo.tsx%3A150%2C18