Exploring Recharts: Reference Area

2 min readJun 21, 2020

A reference area or highlighted area in a chart, as the name suggests, can be used to highlight some important information in the chart. This can, for example, be used to mark a period of decline in sales of a commodity, and provide extra context on hover or other interactions.

Recharts provides an implementation of ReferenceArea which has a fairly easy API and also a fairly convenient customization API using the shape prop.

A basic example:

Also note that:

if you only specify x1; x2 would be extrapolated to the end of domain
if you only specify x2; x1 would be extrapolated to the start of the domain
if you only specify y1; y2 would be extrapolated to the end of range
if you only specify y2; y1 would be extrapolated to the start of the range

The label for this ReferenceArea can be customized as any other custom label in Recharts.

But wait!, Recharts also exposes a shape prop for the ReferenceArea, which can be used to provide a custom shape to the ReferenceArea as opposed to the default rectangle. Recharts passes on all the required props to this shape function to do any kind of customizations you require.

Check out this example, which renders a circle. Do remember that this shape should return an svg element, so that it can be rendered inside an svg. This also means you can use the foreignobject “hack” to work around this.

That’s not it. Check out this example with interactions. We are showing/hiding another svg element on hover over the ReferenceArea

A list of all other posts in this series:

Exploring Recharts: Reference Area

A list of all other posts in this series:

Written by Gaurav Gupta