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

# ReferenceLine

Draws a line on the chart connecting two points.

## Usage

```tsx theme={null}
import { LineChart, ReferenceLine } from 'recharts';

<LineChart data={data}>
  <ReferenceLine y={500} label="Target" stroke="red" />
</LineChart>
```

## Props

<ParamField path="x" type="number | string">
  If defined, renders a vertical line on this position.

  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceLine will internally calculate the correct pixel position.

  ```tsx theme={null}
  <ReferenceLine x="Monday" />
  ```
</ParamField>

<ParamField path="y" type="number | string">
  If defined, renders a horizontal line on this position.

  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceLine will internally calculate the correct pixel position.

  ```tsx theme={null}
  <ReferenceLine y="Page D" />
  ```
</ParamField>

<ParamField path="segment" type="array">
  Tuple of coordinates. If defined, renders a diagonal line segment.

  ```tsx theme={null}
  <ReferenceLine segment={[
    { x: 'Page A', y: 200 },
    { x: 'Page C', y: 400 }
  ]} />
  ```
</ParamField>

<ParamField path="position" type="'start' | 'middle' | 'end'" default="middle">
  The position of the reference line when the axis has bandwidth
  (e.g., a band scale). This determines where within the band
  the line is drawn.
</ParamField>

<ParamField path="stroke" type="string" default="#ccc">
  The stroke color. If "none", no line will be drawn.
</ParamField>

<ParamField path="strokeWidth" type="number | string" default="1">
  The width of the stroke.
</ParamField>

<ParamField path="strokeDasharray" type="string | number">
  The pattern of dashes and gaps used to paint the line.
</ParamField>

<ParamField path="fill" type="string" default="none">
  The fill color. Reference lines are typically not filled.
</ParamField>

<ParamField path="fillOpacity" type="number" default="1">
  The opacity of the fill.
</ParamField>

<ParamField path="label" type="boolean | string | number | object | ReactElement | function" default="false">
  Renders a single label.

  * `false`: no labels are rendered
  * `string` | `number`: the content of the label
  * `object`: the props of LabelList component
  * `ReactElement`: a custom label element
  * `function`: a render function of custom label
</ParamField>

<ParamField path="shape" type="ReactElement | function">
  If set a ReactElement or function, the shape of the line can be customized.
</ParamField>

<ParamField path="ifOverflow" type="'discard' | 'hidden' | 'visible' | 'extendDomain'" default="discard">
  Defines how to draw the reference line if it falls outside the chart area.

  * `discard`: don't render if outside
  * `hidden`: render but clip to chart area
  * `visible`: render even if outside
  * `extendDomain`: extend the axis domain to include the reference line
</ParamField>

<ParamField path="xAxisId" type="string | number" default="0">
  The id of x-axis which is corresponding to the data.
  Required when there are multiple XAxes.
</ParamField>

<ParamField path="yAxisId" type="string | number" default="0">
  The id of y-axis which is corresponding to the data.
  Required when there are multiple YAxes.
</ParamField>

<ParamField path="zIndex" type="number" default="400">
  Z-Index of this component and its children. The higher the value,
  the more on top it will be rendered.
  Components with higher zIndex will appear in front of components with lower zIndex.
  If undefined or 0, the content is rendered in the default layer without portals.

  @since 3.4
</ParamField>

<ParamField path="className" type="string | number">
  CSS class name for styling.
</ParamField>

## Notes

This component, unlike `<line>`, is aware of the cartesian coordinate system,
so you specify the dimensions by using data coordinates instead of pixels.

ReferenceLine will calculate the pixels based on the provided data coordinates.

If you prefer to render using pixels rather than data coordinates,
consider using the `<line>` SVG element instead.

## Source

`https://github.com/recharts/recharts/blob/main/src/cartesian/ReferenceLine.tsx`