Recharts ReferenceLine between data points

Question

I have a Recharts LineChart with numeric x-Axis. I would like to draw a ReferenceLine on an arbitrary x-value, but if the x property of ReferenceLine is not any of the x values in my data, it is not showing.

with

const data = [{ x: 1, y: 3 }, { x: 1.5, y: 4 }, { x: 2, y: 3 }];
...
<ReferenceLine x={1.7} stroke="green" label="actual" alwaysShow={true} />

nothing is showing, where as

const data = [{ x: 1, y: 3 }, { x: 1.5, y: 4 }, { x: 2, y: 3 }];
...
<ReferenceLine x={1.5} stroke="green" label="actual" alwaysShow={true} />

works.

I have built the sandbox here: https://codesandbox.io/s/recharts-playground-xxwnl

Is there a way to make the ReferenceLine show for every x?

Answer 1

The problem was that I had not explicitly set the XAxis type to number. After changing

<XAxis dataKey="x" />

this to

<XAxis type="number" dataKey="x" />

it's behaving as expected