# Goal Angle

Source: https://www.pitchkitjs.com/docs/overlays/goal-angle

> The angle subtended by the goal mouth at each point, rendered as a wedge.

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

// StatsBomb coordinates (120 x 80). A few shot locations.
const shots = [
  { x: 108, y: 40 },
  { x: 95, y: 55 },
  { x: 102, y: 22 },
];

/** `<GoalAngle>` renders the angle subtended by the goal mouth at each point. */
export function GoalAngleBasic() {
  return (
    <Pitch type="statsbomb">
      <GoalAngle data={shots} x={(s) => s.x} y={(s) => s.y} />
      <Scatter data={shots} x={(s) => s.x} y={(s) => s.y} r={3} />
    </Pitch>
  );
}
```

## Usage

`<GoalAngle>` takes `x`/`y` accessors per datum and draws a wedge from that point to both
goalposts. Pass `goal` (`"left" | "right" | "nearest"`, default `"nearest"`) to control
which goal is measured against.

```tsx
<GoalAngle data={shots} x={(s) => s.x} y={(s) => s.y} />
```