Trapezoid - Recharts

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

number

default:"0"

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

number

default:"0"

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

Size

number

default:"0"

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

number

default:"0"

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

number

default:"0"

Height of the trapezoid in pixels.

Appearance

string

CSS class name to apply to the trapezoid element.

Animation

boolean

default:"false"

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

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.

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

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

Event handler for mousedown events on the trapezoid.

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

Event handler for mouseup events on the trapezoid.

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

Event handler for mousemove events on the trapezoid.

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

Event handler for mouseover events on the trapezoid.

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

Event handler for mouseout events on the trapezoid.

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

Event handler for mouseenter events on the trapezoid.

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

⌘I