title: Recharts Line chart doesn't plot new point on data update
body: <p>I have a simple app that allows users to track their weight over time. When a user adds a new entry, the chart updates and is definitely receiving the new data in the props, but isn't plotting the new point.</p>
  <p><strong>Recharts component:</strong></p>
  <pre><code>import React from 'react';
  import {
      ResponsiveContainer,
      LineChart,
      Line,
      CartesianGrid,
      XAxis,
      YAxis
  } from 'recharts';
  import moment from 'moment';
  
  const TrackingChart = (props) =&gt; {
      const {
          data
      } = props
  
      let date_min = 0
      let date_max = 0
  
      if (data.length &gt; 0) {
          date_min = data[0]['date'] - (1000 * 60 * 60 * 24)
          date_max = data.slice(-1)[0]['date'] + (1000 * 60 * 60 * 24);
      }
  
      const dateFormatter = date =&gt; {
          // return moment(date).unix();
          return moment(date).format('DD-MMM-YY');
      };
  
      return (
          &lt;ResponsiveContainer width=&quot;100%&quot; height={300}&gt;
              &lt;LineChart data={data}&gt;
                  &lt;Line dataKey=&quot;weight&quot; stroke=&quot;#8884d8&quot; /&gt;
                  &lt;CartesianGrid stroke=&quot;#ccc&quot; /&gt;
                  &lt;XAxis
                      dataKey=&quot;date&quot;
                      scale=&quot;time&quot;
                      type=&quot;number&quot;
                      domain={[date_min, date_max]}
                      tickFormatter={dateFormatter} /&gt;
                  &lt;YAxis /&gt;
              &lt;/LineChart&gt;
          &lt;/ResponsiveContainer&gt;
      )
  }
  
  export default TrackingChart
  </code></pre>
  <p>I know the chart received the new data into props as the x-axis updates, example below:</p>
  <p><strong>Chart before adding new data</strong>
  <a href="https://i.stack.imgur.com/sGJBB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sGJBB.png" alt="Chart before adding new data point" /></a></p>
  <p><strong>Chart after adding new data</strong></p>
  <p><em>data</em>
  date - 31-May-2021
  weight - 60</p>
  <p><a href="https://i.stack.imgur.com/XhUCq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XhUCq.png" alt="Chart after adding new data" /></a></p>
  <p>The <code>TrackingChart</code> component definitely has the updated props:
  <a href="https://i.stack.imgur.com/ZjBy8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZjBy8.png" alt="enter image description here" /></a></p>
  <p>And the LineChart has the updated data also:
  <a href="https://i.stack.imgur.com/i3GsP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i3GsP.png" alt="enter image description here" /></a></p>
  <p>Any ideas why the chart itself doesn't add the new datapoint to the chart in the DOM?</p>