# Polygon

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

> An arbitrary closed shape from a list of points — good for highlighting zones.

```tsx
import { cropForHalf, getPitchDimensions } from "@pitchkit/core";
import { Polygon, VerticalPitch } from "@pitchkit/react";

// StatsBomb coordinates (120 x 80). A single highlighted zone in the
// attacking half — the half this example crops to.
const zones = [
  {
    vertices: [
      [80, 18],
      [120, 18],
      [120, 62],
      [80, 62],
    ] as const,
  },
];

const dimensions = getPitchDimensions("statsbomb");

/**
 * `<Polygon>` draws an arbitrary closed shape — good for highlighting zones.
 * Shown here cropped to the attacking half (`cropForHalf`) and rotated
 * vertical (`<VerticalPitch>`), the usual framing for a single-zone or
 * shot-map style view.
 */
export function PolygonBasic() {
  return (
    <VerticalPitch type="statsbomb" crop={cropForHalf(dimensions)}>
      <Polygon data={zones} points={(z) => z.vertices} />
    </VerticalPitch>
  );
}
```

## Usage

`<Polygon>` takes a `points` accessor per datum, returning that shape's vertices as
`[x, y]` pairs in provider coordinates. One datum draws one filled polygon.

```tsx
<VerticalPitch type="statsbomb" crop={cropForHalf(dimensions)}>
  <Polygon data={zones} points={(z) => z.vertices} />
</VerticalPitch>
```