Trapezoid

API reference for the Recharts Trapezoid component

Renders a trapezoid shape with support for animation.

A trapezoid is a four-sided polygon with two parallel sides of different lengths. This component is commonly used in funnel charts.

Props

Positioning

x · number · default: "0"

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

y · number · default: "0"

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

Size

upperWidth · number · default: "0"

Width of the upper horizontal side of the trapezoid in pixels.

lowerWidth · number · default: "0"

Width of the lower horizontal side of the trapezoid in pixels.

height · number · default: "0"

Height of the trapezoid in pixels.

Appearance

className · string

CSS class name to apply to the trapezoid element.

Animation

isUpdateAnimationActive · boolean · default: "false"

If set to true, trapezoid will update and render with a gradual fade-in animation from left to right.

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.

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

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

Event handler for mousedown events on the trapezoid.

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

Event handler for mouseup events on the trapezoid.

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

Event handler for mousemove events on the trapezoid.

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

Event handler for mouseover events on the trapezoid.

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

Event handler for mouseout events on the trapezoid.

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

Event handler for mouseenter events on the trapezoid.

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

Event handler for mouseleave events on the trapezoid.

Examples

Basic trapezoid

import { Trapezoid } from 'recharts';

<Trapezoid
  x={50}
  y={50}
  upperWidth={100}
  lowerWidth={60}
  height={80}
  fill="#8884d8"
/>

Inverted trapezoid

import { Trapezoid } from 'recharts';

<Trapezoid
  x={50}
  y={50}
  upperWidth={60}
  lowerWidth={100}
  height={80}
  fill="#82ca9d"
/>

With animation

import { Trapezoid } from 'recharts';

<Trapezoid
  x={50}
  y={50}
  upperWidth={100}
  lowerWidth={60}
  height={80}
  fill="#ffc658"
  isUpdateAnimationActive={true}
  animationDuration={1000}
  animationEasing="ease-out"
/>