API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

LineDrawShape

The default shape for Line. During the entrance animation, the line is progressively revealed using the strokeDasharray SVG attribute: the visible portion grows from 0 to the full path length as animationElapsedTime progresses from 0 to 1.

This is the built-in shape for Line. It is automatically used when no custom shape prop is provided. You can import and reuse it as a starting point for custom shapes, or use it as a reference for building your own.

The animation progress props (animationElapsedTime, isAnimating, isEntrance) are available for custom shapes that want to add their own effects on top.

Available since Recharts 3.9

Related Links

  • pathRefReact.RefObject<SVGPathElement>

    CurveProps use Ref which includes the object plus callback. Here in LineDrawShape we have to read from it so we only allow the object - but we keep Curve.ref the same for backwards compatibility. LineDrawShape is new since 3.9 so there's no backwards to go.

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

  • 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

  • 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:

  • visibleLengthnull | numberoptional

    The computed visible length of the SVG path during entrance animation, in pixels.

    • When a number: the shape should apply stroke-dasharray to reveal exactly this many pixels.
    • When null or undefined: no entrance-driven stroke-dasharray should be applied.

    This value is computed by useAnimatedLineLength in the parent component.