title: Recharts scatter chart shows the lowest x value in tooltip when chart is resized
body: <p>I am using Recharts Scatter chart to draw a bubble chart. As per requirements, the chart should be resizable to double the height or width. Before resizing everything is fine. But once the chart is resized, the tooltip shows an additional item (this is the lowest value in x axis data set across all data series). Once this happens, this incorrect tooltip persists even after changing chart back to original size.</p>
  <p>Correct tooltip before resizing</p>
  <p><a href="https://i.stack.imgur.com/Azvqn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Azvqn.png" alt="Correct tooltip before resizing" /></a></p>
  <p>Incorrect tooltip after resizing, here 45 is the lowest x value in both Type A and Type B</p>
  <p><a href="https://i.stack.imgur.com/JoPqv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JoPqv.png" alt="Incorrect tooltip after resizing, here 45 is the lowest x value in both Type A and Type B" /></a></p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const BubbleChart = ({ data, width, height }) =&gt; {
    const drawCharts = (data) =&gt; {
      const charts = [];
      for (let i = 0; i &lt; data.length; i++) {
        charts.push(
          &lt;Scatter
            name={data[i].name}
            data={data[i].values}
            fill={colors[i]}
          /&gt;
        );
      }
      return charts;
    };
  
    return (
      &lt;ScatterChart
        width={width}
        height={height - 100}
        margin={{ top: 10, right: 40, bottom: 0, left: 0 }}
      &gt;
        &lt;CartesianGrid strokeDasharray="3 3" /&gt;
        &lt;XAxis
          type="number"
          dataKey="x"
          name="height"
          unit="cm"
          range={[100, 250]}
        /&gt;
        &lt;YAxis
          type="number"
          dataKey="y"
          name="width"
          unit="cm"
          range={[200, 300]}
        /&gt;
        &lt;ZAxis
          type="number"
          dataKey="z"
          name="weight"
          unit="cm"
          range={[200, 1000]}
        /&gt;
        &lt;Tooltip cursor={{ strokeDasharray: '3 3' }} /&gt;
        &lt;Legend /&gt;
        {drawCharts(data)}
      &lt;/ScatterChart&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  <p>How can I avoid this incorrect legend on resizing the chart?</p>