> ## 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.

# Rectangle

> API reference for the Recharts Rectangle component

Renders a rectangle element with support for rounded corners and animation.

Unlike the standard [SVG rect element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect), this component supports rounded corners and animation. The rectangle is drawn using an SVG path element.

This component accepts X and Y coordinates in pixels. If you need to position the rectangle based on your chart's data, consider using the [ReferenceArea](/api/reference/ReferenceArea) component instead.

## Props

### Positioning

<ParamField path="x" type="number" default="0">
  The x-coordinate of top left point of the rectangle in pixels.
</ParamField>

<ParamField path="y" type="number" default="0">
  The y-coordinate of top left point of the rectangle in pixels.
</ParamField>

<ParamField path="width" type="number" default="0">
  Width of the rectangle in pixels.
</ParamField>

<ParamField path="height" type="number" default="0">
  Height of the rectangle in pixels.
</ParamField>

### Appearance

<ParamField path="radius" type="number | [number, number, number, number]" default="0">
  The radius of corners.

  If you provide a single number, it applies to all four corners.
  If you provide an array of four numbers, they apply to top-left, top-right, bottom-right, bottom-left corners respectively.

  See the [Rounded bar corners guide](https://recharts.github.io/en-US/guide/roundedBars/) for examples.
</ParamField>

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

### Animation

<ParamField path="isAnimationActive" type="boolean" default="false">
  Whether the initial animation is active.
</ParamField>

<ParamField path="isUpdateAnimationActive" type="boolean" default="false">
  Whether the update animation is active when props change.
</ParamField>

<ParamField path="animationBegin" type="number" default="0">
  Delay in milliseconds before animation begins.
</ParamField>

<ParamField path="animationDuration" type="number" default="1500">
  Duration of animation in milliseconds.
</ParamField>

<ParamField path="animationEasing" type="string" default="ease">
  Easing function for the animation. Can be 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', or a custom easing function.
</ParamField>

### SVG properties

This component accepts all standard SVG path 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<SVGPathElement>) => void">
  Event handler for click events on the rectangle.
</ParamField>

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

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

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

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

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

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

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

## Examples

### Basic rectangle

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

<Rectangle
  x={50}
  y={50}
  width={100}
  height={60}
  fill="#8884d8"
/>
```

### Rounded corners

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

// All corners with same radius
<Rectangle
  x={50}
  y={50}
  width={100}
  height={60}
  radius={10}
  fill="#8884d8"
/>

// Individual corner radii (top-left, top-right, bottom-right, bottom-left)
<Rectangle
  x={50}
  y={50}
  width={100}
  height={60}
  radius={[10, 10, 0, 0]}
  fill="#8884d8"
/>
```

### With animation

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

<Rectangle
  x={50}
  y={50}
  width={100}
  height={60}
  fill="#8884d8"
  isUpdateAnimationActive={true}
  animationDuration={800}
  animationEasing="ease-out"
/>
```