# Scatter Chart

Relationships between two numeric variables.

Group: Charts

## Import

```tsx
import { ScatterChart } from "@indoku/ui"
```

## Examples

### Basic

```tsx
const pts = (n: number, a: number, b: number, seed: number) =>
  Array.from({ length: n }, (_, i) => {
    const x = 1 + (i * 9) / n
    return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) }
  })
const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


function ScatterBasic() {
  return <Box maxW="2xl"><ScatterChart series={[{ name: "Group A", points: groupA }]} /></Box>
}
```

### Grouped data

One series per group.

```tsx
const pts = (n: number, a: number, b: number, seed: number) =>
  Array.from({ length: n }, (_, i) => {
    const x = 1 + (i * 9) / n
    return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) }
  })
const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


const groupB = pts(18, 1, 14, 2.1)


function ScatterGrouped() {
  return <Box maxW="2xl"><ScatterChart series={[{ name: "Group A", points: groupA }, { name: "Group B", points: groupB }]} legend /></Box>
}
```

### Trend lines

`trendLine` fits a least-squares line per group.

```tsx
const pts = (n: number, a: number, b: number, seed: number) =>
  Array.from({ length: n }, (_, i) => {
    const x = 1 + (i * 9) / n
    return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) }
  })
const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


const groupB = pts(18, 1, 14, 2.1)


function ScatterTrend() {
  return <Box maxW="2xl"><ScatterChart series={[{ name: "Group A", points: groupA }, { name: "Group B", points: groupB }]} trendLine legend /></Box>
}
```

### Dot connectors

`connect` joins the points in order.

```tsx
const pts = (n: number, a: number, b: number, seed: number) =>
  Array.from({ length: n }, (_, i) => {
    const x = 1 + (i * 9) / n
    return { x: +x.toFixed(2), y: +(a * x + b + 3 * Math.sin(i * seed)).toFixed(2) }
  })
const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


const groupA = pts(18, 2, 4, 1.3)
const groupB = pts(18, 1, 14, 2.1)


function ScatterConnected() {
  return <Box maxW="2xl"><ScatterChart series={[{ name: "Path", points: groupA.slice(0, 10) }]} connect /></Box>
}
```

## Props

### ScatterChart

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `series` | `ScatterSeries[]` |  | Groups of { x, y } points. |
| `trendLine` | `boolean` | `false` | Linear regression per group. |
| `connect` | `boolean` | `false` | Line through points in order. |
| `dotSize` | `number` | `4` | Dot radius. |

`*` = required. Style props and HTML attributes are accepted too.

## See also

- Line Chart: https://ui.indoku.org/docs/line-chart