ReferenceArea

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

Usage

import { LineChart, ReferenceArea } from 'recharts';

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

Props

x1 · 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.

Show Examples

<ReferenceArea x1="Monday" x2="Friday" />
<ReferenceArea x1={10} x2={50} />
<ReferenceArea x1="Page C" />

x2 · 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.

Show Examples

<ReferenceArea x1="Monday" x2="Friday" />
<ReferenceArea x1={10} x2={50} />
<ReferenceArea x2="Page C" />

y1 · 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.

Show Examples

<ReferenceArea y1={100} y2={500} />
<ReferenceArea y1="low" y2="high" />
<ReferenceArea y1={200} />

y2 · 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.

Show Examples

<ReferenceArea y1={100} y2={500} />
<ReferenceArea y1="low" y2="high" />
<ReferenceArea y2={400} />

fill · string · default: "#ccc"

The fill color of the area.

fillOpacity · number · default: "0.5"

The opacity of the fill.

stroke · string · default: "none"

The stroke color of the area border.

strokeWidth · number | string · default: "1"

The width of the stroke.

radius · number · default: "0"

The border radius of the rectangle corners.

label · 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

shape · 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.

ifOverflow · '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

xAxisId · string | number · default: "0"

The id of XAxis which is corresponding to the data. Required when there are multiple XAxes.

yAxisId · string | number · default: "0"

The id of YAxis which is corresponding to the data. Required when there are multiple YAxes.

zIndex · 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

className · string | number

CSS class name for styling.

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