# Convex Hull

Source: https://www.pitchkitjs.com/docs/overlays/convex-hull

> The convex hull of a point set, rendered as a filled polygon — good for touch maps.

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

// StatsBomb coordinates (120 x 80). A player's touches across a half.
const touches = [
  { x: 40, y: 20 },
  { x: 65, y: 15 },
  { x: 90, y: 25 },
  { x: 95, y: 55 },
  { x: 70, y: 65 },
  { x: 45, y: 50 },
  { x: 68, y: 38 }, // interior
];

/** `<ConvexHull>` renders the convex hull of a point set — good for a player's touch map. */
export function ConvexHullBasic() {
  return (
    <Pitch type="statsbomb">
      <ConvexHull data={touches} x={(t) => t.x} y={(t) => t.y} />
      <Scatter data={touches} x={(t) => t.x} y={(t) => t.y} r={3} />
    </Pitch>
  );
}
```

## Usage

`<ConvexHull>` takes `x`/`y` accessors per datum (one point per datum, like `<Scatter>`) and
renders a single filled polygon around the outermost points.

```tsx
<ConvexHull data={touches} x={(t) => t.x} y={(t) => t.y} />
```