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

# ReferenceArea

Draws a rectangular area on the chart to highlight a specific range.

## Usage

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

<LineChart data={data}>
  <ReferenceArea x1="Page A" x2="Page C" fill="red" fillOpacity={0.3} />
</LineChart>
```

## Props

<ParamField path="x1" type="number | string">
  Starting X-coordinate of the area.
  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceArea will internally calculate the correct pixel position.

  If undefined then the area will extend to the left edge of the chart plot area.

  <Expandable title="Examples">
    ```tsx theme={null}
    <ReferenceArea x1="Monday" x2="Friday" />
    <ReferenceArea x1={10} x2={50} />
    <ReferenceArea x1="Page C" />
    ```
  </Expandable>
</ParamField>

<ParamField path="x2" type="number | string">
  Ending X-coordinate of the area.
  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceArea will internally calculate the correct pixel position.

  If undefined then the area will extend to the right edge of the chart plot area.

  <Expandable title="Examples">
    ```tsx theme={null}
    <ReferenceArea x1="Monday" x2="Friday" />
    <ReferenceArea x1={10} x2={50} />
    <ReferenceArea x2="Page C" />
    ```
  </Expandable>
</ParamField>

<ParamField path="y1" type="number | string">
  Starting Y-coordinate of the area.
  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceArea will internally calculate the correct pixel position.

  If undefined then the area will extend to the top edge of the chart plot area.

  <Expandable title="Examples">
    ```tsx theme={null}
    <ReferenceArea y1={100} y2={500} />
    <ReferenceArea y1="low" y2="high" />
    <ReferenceArea y1={200} />
    ```
  </Expandable>
</ParamField>

<ParamField path="y2" type="number | string">
  Ending Y-coordinate of the area.
  This value is using your chart's domain, so you will provide a data value instead of a pixel value.
  ReferenceArea will internally calculate the correct pixel position.

  If undefined then the area will extend to the bottom edge of the chart plot area.

  <Expandable title="Examples">
    ```tsx theme={null}
    <ReferenceArea y1={100} y2={500} />
    <ReferenceArea y1="low" y2="high" />
    <ReferenceArea y2={400} />
    ```
  </Expandable>
</ParamField>

<ParamField path="fill" type="string" default="#ccc">
  The fill color of the area.
</ParamField>

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

<ParamField path="stroke" type="string" default="none">
  The stroke color of the area border.
</ParamField>

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

<ParamField path="radius" type="number" default="0">
  The border radius of the rectangle corners.
</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, the shape of the reference area can be customized.
  If set a function, the function will be called to render customized shape.
</ParamField>

<ParamField path="ifOverflow" type="'discard' | 'hidden' | 'visible' | 'extendDomain'" default="discard">
  Defines how to draw the reference area 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 area
</ParamField>

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

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

<ParamField path="zIndex" type="number" default="100">
  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 Rectangle or `<rect>`, is aware of the cartesian coordinate system,
so you specify the area by using data coordinates instead of pixels.

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

If you prefer to render rectangles using pixels rather than data coordinates,
consider using the Rectangle component instead.

## Source

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