TransWikia.com

Recharts ReferenceLine between data points

Stack Overflow Asked by Philipp on October 15, 2020

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?

One Answer

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

Correct answer by Philipp on October 15, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP