Reference line "isFront" prop doesn't seem to work

Do you want to request a feature or report a bug?

report a bug

What is the current behavior?

The reference line is rendered behind the chart even though the inFront prop is set to true

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

Code: <ReferenceLine x={minRatioObj.i} stroke="#fb8f93" alwaysShow label={{ position: "top", value: "Lowest Ratio", fill: "white", fontSize: 14, dy: 12, dx: dx, fillOpacity: 1 }} strokeDasharray="3 3" strokeWidth={2} isFront={true} />

Demo:

What is the expected behavior?

For the reference line to be rendered in front of the other cartesian components

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

It’s the same in both Chrome & Safari. I’m using recharts 1.0.0-beta.9

[amonsech]

Not sure if this works for your case, but moving your <ReferenceLine/> to the end of your chart should do the trick. SVG’s will render based in document order by default.

<Chart>
    <Bar/>
    ...
    <ReferenceLine/>
</Chart>

[Sotatek-ThuyetNguyen]

Not sure if this works for your case, but moving your <ReferenceLine/> to the end of your chart should do the trick. SVG’s will render based in document order by default.

<Chart>
    <Bar/>
    ...
    <ReferenceLine/>
</Chart>

Work for me!