API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

AreaRevealShape

The default shape for Area that reveals the chart with a left-to-right (or top-to-bottom) clip-path animation on entrance, and renders the plain curve otherwise.

This component renders the complete Area visual: the filled area curve, the stroke curve, and (for range areas) the baseline stroke curve. During entrance animation, all curves are wrapped in a clip-path that progressively reveals the area.

This is the built-in entrance animation for Area. It is automatically used when no customshape prop is provided. You can import and reuse it as a starting point for custom shapes.

Available since Recharts 3.9

Related Links

  • animationElapsedTimenumberoptional

    Normalized animation progress time in the approximately [0, 1] range. 0 = start of animation 1 = end of animation Why approximately? This number already includes easing. The typical easing functions are in 0, 1 but you may construct a custom Bézier curve that goes out of the range and so this number may too be out of the range.

  • baseLineArray<NullableCoordinate> | numberoptional

    Baseline of the area:

    • number: uses the corresponding axis value as a flat baseline;
    • an array of coordinates: describes a custom baseline path.

  • childrenReactNodeoptional

  • classNamestringoptional

  • connectNullsbooleanoptional

    Whether to connect the curve across null points.

    Examples:

  • dangerouslySetInnerHTMLObjectoptional

  • isAnimatingbooleanoptional

    Whether the parent chart element is currently animating.

  • isEntrancebooleanoptional

    Whether the current animation pass is the initial entrance animation. Some Recharts components have different "first render" and "data update" animations and this is the property that tracks it. You may choose to override it and control which animation renders that way.

    Examples:

  • isRangebooleanoptional

  • layout"centric" | "horizontal" | "radial" | "vertical"optional

    This option affects the interpolation algorithm when the type prop is set to 'monotone'. It also specifies the type of baseline when the curve is closed.

  • pathstringoptional

  • pathRefFunction | React.RefObject<SVGPathElement> | nulloptional

  • pointsArray<NullableCoordinate>optional

    The coordinates of all the points in the curve, like an array of objects with x and y coordinates.

  • strokeDasharraynumber | stringoptional

    The pattern of dashes and gaps used to paint the line.

    FORMAT: 

    strokeDasharray="5 5"
strokeDasharray={10}

    Examples:

  • type"basis" | "basisClosed" | "basisOpen" | "bump" | "bumpX" | "bumpY" | "linear" | "linearClosed" | "monotone" | "monotoneX" | "monotoneY" | "natural" | "step" | "stepAfter" | "stepBefore" | CurveFactoryoptional

    The interpolation type of curve. Allows custom interpolation function.

    DEFAULT: "linear"

    Examples: