# Annotate

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

> Place text labels at pitch coordinates.

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

// StatsBomb coordinates (120 x 80).
const zones = [
  { x: 20, y: 40, label: "Defensive third" },
  { x: 60, y: 40, label: "Middle third" },
  { x: 100, y: 40, label: "Attacking third" },
];

/** `<Annotate>` places text labels at pitch coordinates. */
export function AnnotateBasic() {
  return (
    <Pitch type="statsbomb">
      <Annotate data={zones} x={(z) => z.x} y={(z) => z.y} label={(z) => z.label} offsetY={-4} />
    </Pitch>
  );
}
```

## Usage

`<Annotate>` takes `x`/`y`/`label` accessors, plus optional `offsetX`/`offsetY` to nudge label
position away from its anchor point.

```tsx
<Annotate data={zones} x={(z) => z.x} y={(z) => z.y} label={(z) => z.label} offsetY={-4} />
```