Polygon - Recharts

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

ReadonlyArray<{x: number, y: number}>

The coordinates of all the vertexes of the polygon, as an array of objects with x and y coordinates.

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.

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.

Appearance

string

CSS class name to apply to the polygon element.

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

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for click events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mousedown events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mouseup events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mousemove events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mouseover events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mouseout events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mouseenter events on the polygon.

(e: React.MouseEvent<SVGPolygonElement, MouseEvent>) => void

Event handler for mouseleave events on the polygon.

Examples

Basic polygon

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

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"
/>

⌘I