title: RealTime chart in recharts
body: <p>I have a function where the data comes in random order and not in one block. This is my array:</p>
  
  <pre><code>this.props.data = [
  {date: "07", visitors: 0},
  {date: "08", visitors: 8},
  {date: "09", visitors: 14},
  {date: "10", visitors: 17},
  {date: "11", visitors: 23},
  {date: "12", visitors: 31},
  {date: "13", visitors: 40}]
  </code></pre>
  
  <p>And the following chart code</p>
  
  <pre><code>&lt;LineChart data={this.props.data}&gt;
    &lt;XAxis dataKey='date' label={{ value: "Horas", position: "insideBottom", dy: 10} } /&gt;
    &lt;YAxis label={{ value: 'Visitantes', angle: -90, position: 'insideLeft' }}/&gt;
    &lt;Tooltip/&gt;
    &lt;Line type="monotone" dataKey="visitors" stroke="#001529" activeDot={{r: 5}}/&gt;
  &lt;/LineChart&gt;
  </code></pre>
  
  <p>The issue is, my highest visitors value is lower on the chart than the first. (Reminder: He is 5 times greater than the first one).
  <a href="https://i.stack.imgur.com/aoghZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aoghZ.png" alt="Lowest value"></a></p>
  
  <p><a href="https://i.stack.imgur.com/4jC6p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4jC6p.png" alt="Highest value"></a></p>
  
  <p>There is some problem inside my code? Or is this an issue of recharts?</p>