> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Polygon

> API reference for the Recharts Polygon component

Renders a closed polygon shape from a set of coordinate points.

The Polygon component connects a series of points to create a closed shape. It can handle discontinuous data and optionally render an area between two sets of points (like a range area).

## Props

### Data

<ParamField path="points" type="ReadonlyArray<{x: number, y: number}>">
  The coordinates of all the vertexes of the polygon, as an array of objects with x and y coordinates.
</ParamField>

<ParamField path="baseLinePoints" type="ReadonlyArray<{x: number, y: number}>">
  Optional baseline points for creating a range polygon.

  When provided, the polygon is rendered as an area between the `points` and `baseLinePoints`.
</ParamField>

<ParamField path="connectNulls" type="boolean">
  Whether to connect segments across null points.

  When `false`, gaps appear in the polygon where data points are null.
  When `true`, the polygon connects across null values.
</ParamField>

### Appearance

<ParamField path="className" type="string">
  CSS class name to apply to the polygon element.
</ParamField>

### SVG properties

This component accepts all standard SVG polygon element properties including:

* `fill` - Fill color
* `stroke` - Stroke color
* `strokeWidth` - Stroke width
* `opacity` - Opacity value
* `style` - Inline styles

### Events

<ParamField path="onClick" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for click events on the polygon.
</ParamField>

<ParamField path="onMouseDown" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mousedown events on the polygon.
</ParamField>

<ParamField path="onMouseUp" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mouseup events on the polygon.
</ParamField>

<ParamField path="onMouseMove" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mousemove events on the polygon.
</ParamField>

<ParamField path="onMouseOver" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mouseover events on the polygon.
</ParamField>

<ParamField path="onMouseOut" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mouseout events on the polygon.
</ParamField>

<ParamField path="onMouseEnter" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mouseenter events on the polygon.
</ParamField>

<ParamField path="onMouseLeave" type="(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void">
  Event handler for mouseleave events on the polygon.
</ParamField>

## Examples

### Basic polygon

```tsx theme={null}
import { Polygon } from 'recharts';

const points = [
  { x: 100, y: 50 },
  { x: 150, y: 100 },
  { x: 125, y: 150 },
  { x: 75, y: 150 },
  { x: 50, y: 100 },
];

<Polygon
  points={points}
  fill="#8884d8"
  stroke="#8884d8"
  strokeWidth={1}
/>
```

### Range polygon with baseline

```tsx theme={null}
import { Polygon } from 'recharts';

const upperPoints = [
  { x: 0, y: 100 },
  { x: 50, y: 80 },
  { x: 100, y: 90 },
  { x: 150, y: 70 },
];

const lowerPoints = [
  { x: 0, y: 120 },
  { x: 50, y: 130 },
  { x: 100, y: 125 },
  { x: 150, y: 140 },
];

<Polygon
  points={upperPoints}
  baseLinePoints={lowerPoints}
  fill="#82ca9d"
  fillOpacity={0.6}
  stroke="#82ca9d"
/>
```