Rectangle - Recharts

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

number

default:"0"

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

number

default:"0"

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

number

default:"0"

Width of the rectangle in pixels.

number

default:"0"

Height of the rectangle in pixels.

Appearance

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.

string

CSS class name to apply to the rectangle element.

Animation

boolean

default:"false"

Whether the initial animation is active.

boolean

default:"false"

Whether the update animation is active when props change.

number

default:"0"

Delay in milliseconds before animation begins.

number

default:"1500"

Duration of animation in milliseconds.

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

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

Event handler for click events on the rectangle.

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

Event handler for mousedown events on the rectangle.

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

Event handler for mouseup events on the rectangle.

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

Event handler for mousemove events on the rectangle.

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

Event handler for mouseover events on the rectangle.

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

Event handler for mouseout events on the rectangle.

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

Event handler for mouseenter events on the rectangle.

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

⌘I