Legend overlapping when data from server

Question

class SearchContentChart extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {

    const loadLines = data => data.map((item) => {
      return <Line type="monotone" key={item.key} dataKey={item.key} name={item.name} stroke={item.color} dot={null}/>
    });

    return (
      <ResponsiveContainer height={ 300 }>
        <LineChart data={this.props.data.data || []}>
          <XAxis dataKey="name"/>
          <YAxis />
          <CartesianGrid strokeDasharray="3 3"/>
          <Tooltip />
          <Legend/>
          {loadLines(this.props.data.line || [])}
        </LineChart>
      </ResponsiveContainer>
    )
  }
}

When the component first rendering legend is overlapping but from the next rendering the chart works well.

How can I make it working at the first rendering when I get data from the server side?

Answer 1

Setting debounce={1} to the ResponsiveContainer worked for me.

<ResponsiveContainer debounce={1}>