Rechart animation for linechart bringing in lines from right side

Question

Diving into using Recharts in React and I feel like I'm going insane! All the tutorial and sample code line graphs have this beautiful neat animation that feels like the line is being drawn from right to left. However, I've got it setup and for some reason the animation has the lines on my line chart floating in from the right hand side. I have a gif of the behavior below:

I've fiddled with the animation options (ease, ease-in, ETC), duration, enabling or disabling the animation, ETC. No matter what I do it always floats in from the right side.

There is one way I can make the chart draw itself properly - if I put it inside a div with a height of 0 and then manually change the height to 600px then the animation will play out in the expected way, otherwise I get the weird floating right-side lines.

As mentioned above this is a react application, the render code for my linechart is included below.

render() {

  let linesToRender = [];
  for(let i = 0; i < this.props.driverNames.length; i++) {
    let lineColor;
    if(this.props.driverNames[i].current_score < 0) {
      lineColor = 'red'
    } else {
      lineColor = 'green'
    } 
    linesToRender.push(
      <Line animationDuration={5000} type='montone' dataKey= . {this.props.driverNames[i].display_name} stroke={lineColor} />
    )
    console.log(this.props.driverNames[i])
  }



return(
  <ResponsiveContainer width="100%" height="100%">
    <LineChart data={this.props.data} height={600} width={1000}>
      {linesToRender}
     <XAxis dataKey="date" padding={{left: 30, right: 30}}/>
     <YAxis/>
     <Tooltip/>
     <Legend />
    </LineChart>
  </ResponsiveContainer>
)

}

Wondering if anyone else has had this problem or can offer any guidance.

Answer 1

I had this problem. In my situation I initialized my chart with data=[], which was quickly filled in with actual data that I retrieved through an api request.

To make my chart render properly and not fly in from the side like you're saying, I prevented the chart from rendering at all until I was sure I had my data Array. Maybe you can do something like

{this.state.data.length > 0 &&
  <LineChart data={this.state.data} >
  </LineChart>
}