> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<ParamField path="points" type="ReadonlyArray<{x: number, y: number}>">
  The coordinates of all the points in the curve, as an array of objects with x and y coordinates.
</ParamField>

<ParamField path="baseLine" type="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.
</ParamField>

### Interpolation

<ParamField path="type" 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](https://d3js.org/d3-shape/curve) for details.
</ParamField>

<ParamField path="layout" type="'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.
</ParamField>

<ParamField path="connectNulls" type="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](https://recharts.github.io/en-US/examples/LineChartConnectNulls/)
  * [AreaChart with connectNulls](https://recharts.github.io/en-US/examples/AreaChartConnectNulls/)
</ParamField>

### Appearance

<ParamField path="className" type="string">
  CSS class name to apply to the curve element.
</ParamField>

<ParamField path="strokeDasharray" type="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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
</ParamField>

<ParamField path="path" type="string">
  A pre-computed SVG path string. If provided, this is used instead of computing the path from points.
</ParamField>

<ParamField path="pathRef" type="Ref<SVGPathElement>">
  React ref to access the underlying SVG path element.
</ParamField>

### 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

<ParamField path="onClick" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for click events on the curve.
</ParamField>

<ParamField path="onMouseEnter" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseenter events on the curve.
</ParamField>

<ParamField path="onMouseLeave" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseleave events on the curve.
</ParamField>

<ParamField path="onMouseDown" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mousedown events on the curve.
</ParamField>

<ParamField path="onMouseUp" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseup events on the curve.
</ParamField>

<ParamField path="onMouseMove" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mousemove events on the curve.
</ParamField>

<ParamField path="onMouseOver" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseover events on the curve.
</ParamField>

<ParamField path="onMouseOut" type="(e: React.MouseEvent<SVGPathElement>) => void">
  Event handler for mouseout events on the curve.
</ParamField>

## Examples

### Linear curve

```tsx theme={null}
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

```tsx theme={null}
import { Curve } from 'recharts';

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

### Area curve with baseline

```tsx theme={null}
import { Curve } from 'recharts';

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

### Step function

```tsx theme={null}
import { Curve } from 'recharts';

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