ReferenceLine not appearing when returned from inside component

I think I’ve found a bug. I am trying to create a ScatterChart with a ReferenceLine. I want to put the ReferenceLine inside a Redux connected component, which means I have to put it in a separate custom component.

The problem is that unless I explicitly place the ReferenceLine inside the chart it doesn’t appear in the chart at all. Even if I put it in a simple wrapper component the ReferenceLine disappears.

Here is a JSFiddle: http://jsfiddle.net/9xjjuwkk/27/

Chart

class Chart extends Component {
    render() {
        const { now } = this.props;
        return (
            <ResponsiveContainer width="100%" height={400}>
                <ScatterChart >
                    <CartesianGrid strokeDasharray="3 3" />
                    <Scatter name="vector" data={data} fill='#8884d8'
                        line
                        shape={shape} />
                    <XAxis dataKey="time" name="time" unit="seconds" label="seconds" domain={[0, 1]} />
                    <YAxis dataKey="vector" unit="g" name="acceleration" />
                    <ReferenceLine x={0.5} stroke="red" strokeDasharray="3 3" label="Crash" />
                    <NowLine now={now} /> {/* should also return ReferenceLine */}
                </ScatterChart>
            </ResponsiveContainer>
        )
    }
}

Component that returns a ReferenceLine

class NowLine extends Component {
    render() {
        const { now } = this.props;
        return (
            <ReferenceLine x={now} stroke="blue" strokeDasharray="3 3" label="Current" />
        )
    }
}

There should be two reference lines inside the chart, a red one which is placed inside the chart explicitly, and a blue one which should be returned through the NowLine component. However the blue one doesn’t appear. Why is this the case?

I am using recharts v0.20.8 on Chrome 55/Windows 7.

This could be related to #41 but I’m not 100% sure.

Any help would be appreciated!

[xile611]

@Arrow7000

You must use component ReferenceLine not a customized component. Check the code for detail.

When we render ScatterChart, we’ll check the type of children to find out the ReferenceLine instances and append some props to the instances. So If you add a customized component to the ScatterChart, we can’t identify it as a ReferenceLine element.

              <ResponsiveContainer width="100%" height={400}>
                <ScatterChart >
                    <CartesianGrid strokeDasharray="3 3" />
                    <Scatter name="vector" data={data} fill='#8884d8'
                        line
                        shape={shape} />
                    <XAxis dataKey="time" name="time" unit="seconds" label="seconds" domain={[0, 1]} />
                    <YAxis dataKey="vector" unit="g" name="acceleration" />
                    <ReferenceLine x={0.5} stroke="red" strokeDasharray="3 3" label="Crash" />
                    <ReferenceLine x={now} stroke="blue" strokeDasharray="3 3" label="Current" />
                </ScatterChart>
            </ResponsiveContainer>

[LR-brendan]

Is there any solution to this problem yet? I am trying to do the same thing as @Arrow7000, i.e create a Redux connected ReferenceLine which is required to only re-render this the reference line and not entire graph.