Curve

API reference for the Recharts Curve component

Renders a line or area curve with various interpolation types.

The Curve component is used internally by Line and Area charts to render the data paths. It supports multiple interpolation algorithms from D3 and can render both simple lines and filled areas.

Props

Data

points · ReadonlyArray<{x: number, y: number}>

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

baseLine · number | ReadonlyArray<{x: number, y: number}>

Baseline of the area:

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

When provided, the curve is rendered as a filled area between the points and the baseline.

Interpolation

type · CurveType · default: "linear"

The interpolation type of curve. Can be:

• 'basis' - B-spline interpolation
• 'basisClosed' - Closed B-spline
• 'basisOpen' - Open B-spline
• 'bumpX' - Bump curve with horizontal segments
• 'bumpY' - Bump curve with vertical segments
• 'bump' - Bump curve (uses layout to determine direction)
• 'linear' - Piecewise linear segments
• 'linearClosed' - Closed linear path
• 'natural' - Natural cubic spline
• 'monotoneX' - Cubic spline that preserves monotonicity in x
• 'monotoneY' - Cubic spline that preserves monotonicity in y
• 'monotone' - Monotone cubic spline (uses layout to determine direction)
• 'step' - Step function
• 'stepBefore' - Step function with vertical segment before horizontal
• 'stepAfter' - Step function with vertical segment after horizontal
• Custom function: a D3 curve factory function

See D3 curve documentation for details.

layout · 'horizontal' | 'vertical'

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

connectNulls · boolean · default: "false"

Whether to connect the curve across null points.

When false, gaps appear in the curve where data points are null. When true, the curve connects across null values.

See examples:

• LineChart with connectNulls
• AreaChart with connectNulls

Appearance

className · string

CSS class name to apply to the curve element.

strokeDasharray · string | number

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

Examples:

• "5 5" - 5px dashes with 5px gaps
• "10 5 2 5" - More complex pattern
• 10 - Single number interpreted as “10 10”

See SVG stroke-dasharray documentation.

path · string

A pre-computed SVG path string. If provided, this is used instead of computing the path from points.

pathRef · Ref<SVGPathElement>

React ref to access the underlying SVG path element.

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

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

Event handler for mouseenter events on the curve.

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

Event handler for mouseleave events on the curve.

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

Event handler for mousedown events on the curve.

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

Event handler for mouseup events on the curve.

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

Event handler for mousemove events on the curve.

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

Event handler for mouseover events on the curve.

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

Event handler for mouseout events on the curve.

Examples

Linear curve

import { Curve } from 'recharts';

const points = [
  { x: 0, y: 100 },
  { x: 50, y: 150 },
  { x: 100, y: 120 },
  { x: 150, y: 180 },
];

<Curve
  type="linear"
  points={points}
  stroke="#8884d8"
  strokeWidth={2}
  fill="none"
/>

Smooth curve with natural spline

import { Curve } from 'recharts';

<Curve
  type="natural"
  points={points}
  stroke="#82ca9d"
  strokeWidth={2}
  fill="none"
/>

Area curve with baseline

import { Curve } from 'recharts';

<Curve
  type="monotone"
  points={points}
  baseLine={50}
  fill="#8884d8"
  fillOpacity={0.6}
  stroke="#8884d8"
/>

Step function

import { Curve } from 'recharts';

<Curve
  type="stepAfter"
  points={points}
  stroke="#ffc658"
  strokeWidth={2}
  fill="none"
/>