How to set the reference line position based on value?

[IkaWaAyuMu]

Right now the referenceLinePosition I assumed that it based on pixel amount from the bottom. I want to use value based on data value instead.

For example,

const data = [{value: 10, value: 20, value: 30, value: 40}]
const meanValue = data.reduce((prev, curr) => prev + curr.value, 0) / data.length;

return (<LineChart
    // @ts-ignore
    data={data}
    // I want to use meanValue as the reference line here
  />
)

Is there currently any way to do that?

[Abhinandan-Kushwaha]

Hi @IkaWaAyuMu 👋
I think you misunderstood referenceLinePosition. It is NOT based on pixel amount from the bottom. It is already based on the data values.

So, for your example, you just need to pass the props showReferenceLine1 and referenceLine1Position={meanValue}

Your code should look like-

const data = [{value: 10, value: 20, value: 30, value: 40}]
const meanValue = data.reduce((prev, curr) => prev + curr.value, 0) / data.length;

return (<LineChart
    // @ts-ignore
    data={data}
    showReferenceLine1
    referenceLine1Position={meanValue}
  />
)

[IkaWaAyuMu]

Thanks for remind me this, I'm trying to figure out the and the real issue is it does not offset correctly with yAxisOffset. So I have to subtract original referenceLinePosition by yAxisOffset to have the correct position. Sorry for not mentioning yAxisOffset in the first time.