Exploring Recharts: multiple ReferenceLine segments

3 min readJun 21, 2020

Most charts usually require some kind of reference line to compare the current plotted data against. For example, a budget chart can have a reference line for 70% of the budget, to display when the expenses went over the prescribed limit and another reference line for 100% of the budget, Or , a chart showing the monthly rainfall in cm can have a reference line for average rainfall in cm to show in which months the rainfall was more than average. These are very general use cases for single reference lines which span a whole dimension (x or y in terms of cartesian coordinates).

Recharts provides a ReferenceLine component which helps you achieve exactly this.

Then there are some use cases for multiple reference lines which may span different parts of a particular dimension, for example, bar charts grouped by year can have a different average for each year for which to compare that year’s data against. These disjointed segments would span different portions of the x dimension.

Recharts provides this flexibility through a currently undocumented API.

ReferenceLine can accept a segment prop which can take an array with 2 set of endpoints within which the line would be drawn.

This is useful when:

you need to have a reference line which is not horizontal or vertical but sloped.
when you need to have multiple reference lines for different portions of a dimension.
when you need to have a reference line not span the whole dimension.

Then there can be a use case for a single reference line, which can have multiple connected segments, but a single label for the whole line.
This can be achieved by rendering multiple disjointed lines as in the previous use case and having some contrived logic to display one single label by hiding the labels for all but one, and positioning the label correctly, but how convenient it would be if we could pass all these multiple segments to one component, instead of creating a new component for each of these parts and that component could handle all the contrived logic. Also in this case, depending on the implementation the segments could actually be connected and not disjoint.

That’s where the out of the box recharts functionality ends.

We can create our own component to take in a segments prop instead of a segment prop, which is an array of segments, where each segment is an object containing a pair of start and end coordinates. But, creating custom components in Recharts is a pain. So, for now, we will be satisfied with what we have, as the single reference line with multiple connected segments use case can still be achieved by the existing API.

Just for fun, This is what the component may look like:

<MyReferenceLine
  segments={[
    [{ x: 2, y: 23 }, { x: 4, y: 2 }],
    [{ x: 2, y: 23 }, { x: 4, y: 2 }],
    [{ x: 2, y: 23 }, { x: 4, y: 2 }],
  ]}
  label="single label"
  stroke="red"
/>

Please note that this is fundamentally different than a component which displays multiple ReferenceLines, as in case of multiple ReferenceLines each of those lines can have different config parameters, although our custom component may use multiple ReferenceLine components internally and have some contrived logic encapsulated so that the output might still look and behave like a single connected component, OR, it can have a completely separate implementation from ReferenceLine.

A list of all other posts in this series:

Exploring Recharts: multiple ReferenceLine segments

A list of all other posts in this series:

Written by Gaurav Gupta