Rectangle
Renders a rectangle element. Unlike the rect SVG element, this component supports rounded corners and animation. 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.
Related Links
Props
animationBeginnumberoptional
DEFAULT:
0animationDurationnumberoptional
DEFAULT:
1500animationEasing(union of 9 variants)optional
DEFAULT:
"ease"classNamestringoptional
heightnumber | stringoptional
Height of the rectangle in pixels.
DEFAULT:
0isAnimationActivebooleanoptional
DEFAULT:
falseisUpdateAnimationActivebooleanoptional
DEFAULT:
falseradius[number, number, number, number] | numberoptional
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.
DEFAULT:
0Examples:
widthnumber | stringoptional
Width of the rectangle in pixels.
DEFAULT:
0xnumber | stringoptional
The x-coordinate of top left point of the rectangle.
DEFAULT:
0ynumber | stringoptional
The y-coordinate of top left point of the rectangle.
DEFAULT:
0onClickReact.MouseEventHandler<T>optional
The customized event handler of click on the rectangle
Examples:
onMouseDownReact.MouseEventHandler<T>optional
The customized event handler of mousedown on the rectangle
onMouseEnterReact.MouseEventHandler<T>optional
The customized event handler of mouseenter on the rectangle
onMouseLeaveReact.MouseEventHandler<T>optional
The customized event handler of mouseleave on the rectangle
onMouseMoveReact.MouseEventHandler<T>optional
The customized event handler of mousemove on the rectangle
onMouseOutReact.MouseEventHandler<T>optional
The customized event handler of mouseout on the rectangle
onMouseOverReact.MouseEventHandler<T>optional
The customized event handler of mouseover on the rectangle
onMouseUpReact.MouseEventHandler<T>optional
The customized event handler of mouseup on the rectangle