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
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
A list of all other posts in this series:
- Exploring Recharts: Reference Area
- Exploring Recharts: multiple ReferenceLine segments
- Exploring Recharts: using foreignObject to render custom HTML
- Exploring Recharts: What can be rendered inside a Recharts contianer ?
- Exploring Recharts: different ways of accessing data
- Exploring Recharts: Pulsating circle using ReferenceDot
- Exploring Recharts: LineChart with different colored segments for a single Line