# Scatter

Source: https://www.pitchkitjs.com/docs/overlays/scatter

> Plot discrete points on a pitch, with per-point styling and hover tooltips.

```tsx
import { Pitch, Scatter } from "@pitchkit/react";

// StatsBomb coordinates (120 x 80).
const players = [
  { name: "GK", x: 12, y: 40 },
  { name: "LB", x: 30, y: 12 },
  { name: "CB", x: 28, y: 40 },
  { name: "RB", x: 30, y: 68 },
  { name: "CM", x: 55, y: 40 },
  { name: "LW", x: 85, y: 15 },
  { name: "ST", x: 95, y: 40 },
  { name: "RW", x: 85, y: 65 },
];

/** `<Scatter>` plots discrete points with per-point styling and hover tooltips. */
export function ScatterBasic() {
  return (
    <Pitch type="statsbomb">
      <Scatter
        data={players}
        x={(p) => p.x}
        y={(p) => p.y}
        r={7}
        stroke="white"
        strokeWidth={2}
        tooltip={(p) => p.name}
      />
    </Pitch>
  );
}
```

## Usage

`<Scatter>` takes a `data` array plus `x`/`y` accessors; `r`, `fill`, `stroke`, `strokeWidth`,
and `tooltip` are all optional and accept either a static value or a per-datum function.

```tsx
<Scatter data={players} x={(p) => p.x} y={(p) => p.y} r={7} tooltip={(p) => p.name} />
```