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, 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 component instead.

Props

Positioning

x · number · default: "0"

The x-coordinate of top left point of the rectangle in pixels.

y · number · default: "0"

The y-coordinate of top left point of the rectangle in pixels.

width · number · default: "0"

Width of the rectangle in pixels.

height · number · default: "0"

Height of the rectangle in pixels.

Appearance

radius · 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 for examples.

className · string

CSS class name to apply to the rectangle element.

Animation

isAnimationActive · boolean · default: "false"

Whether the initial animation is active.

isUpdateAnimationActive · boolean · default: "false"

Whether the update animation is active when props change.

animationBegin · number · default: "0"

Delay in milliseconds before animation begins.

animationDuration · number · default: "1500"

Duration of animation in milliseconds.

animationEasing · string · default: "ease"

Easing function for the animation. Can be ‘ease’, ‘ease-in’, ‘ease-out’, ‘ease-in-out’, ‘linear’, or a custom easing function.

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

onClick · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for click events on the rectangle.

onMouseDown · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mousedown events on the rectangle.

onMouseUp · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseup events on the rectangle.

onMouseMove · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mousemove events on the rectangle.

onMouseOver · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseover events on the rectangle.

onMouseOut · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseout events on the rectangle.

onMouseEnter · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseenter events on the rectangle.

onMouseLeave · (e: React.MouseEvent<SVGPathElement>) => void

Event handler for mouseleave events on the rectangle.

Examples

Basic rectangle

import { Rectangle } from 'recharts';

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

Rounded corners

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

import { Rectangle } from 'recharts';

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