title: Recharts ScatterChart not rendering dots and duplicating values in XAxis
body: <p>I'm trying to render a ScatterChart with <a href="http://recharts.org/" rel="nofollow noreferrer">ReCharts</a>. </p>
  
  <p>The y axis is rendering appropriately, as are the labels for the different scatter lines, however no dots appear and the x axis includes duplicate values. </p>
  
  <pre><code> let line2, yAxis = null;
   let y_axis1 = y_axis;
   const scatters = [];
  
   if (predictionType === 'range') {
       y_axis1 = "lower_bound";
       line2 = &lt;Line type="monotone" dataKey="upper_bound" stroke="#82ca9d" /&gt;
       Object.keys(data).map((email, i) =&gt; {
       const datum = data[email];
       const lowerBoundName = `${email} lower bound`
       const upperBoundName = `${email} upper bound`
       scatters.push(&lt;Scatter 
           data={datum} 
           dataKey='lower_bound'
           key={-i}
           fill="#8884d8"
           name={lowerBoundName}
           shape='square' /&gt;)
       scatters.push(&lt;Scatter 
           data={datum} 
           dataKey='upper_bound'
           key={i}
           fill="#8884d8"
           name={upperBoundName}
           shape='diamond' /&gt;)
       })
   } else {
       Object.keys(data).map((email, i) =&gt; {
       const datum = data[email];
       console.log(datum)
       scatters.push(&lt;Scatter 
           dataKey='value'
           data={datum} 
           key={i}
           fill="#8884d8"
           name={email} /&gt;)
       })
   }
  
   // Customize
   const LineColor = y_axis == 'average' ? '#81d4fa' : '#81d4fa';
  
   if (predictionType === 'boolean') {
       yAxis = &lt;YAxis 
            allowDecimals={false}
            ticks={[0,1]}
            tickFormatter={(tickItem) =&gt; tickItem === 1 ? 'true' : 'false'}
            /&gt;
   } else {
       yAxis = &lt;YAxis name='value'/&gt;
   }
  
   return (
       &lt;ScatterChart width={730} height={250}
           margin={{ top: 20, right: 20, bottom: 10, left: 10 }}&gt;
       &lt;CartesianGrid strokeDasharray="3 3" /&gt;
       &lt;XAxis dataKey="created_at" name='created_at' tickFormatter={formatXAxisDate}/&gt;
       {yAxis}
       &lt;Tooltip cursor={{ strokeDasharray: '3 3' }} /&gt;
       &lt;Legend /&gt;
       {scatters}
       &lt;/ScatterChart&gt;   
   )
  </code></pre>
  
  <p>The <code>prediction_type</code> specifies whether the data includes lower bound and upper bound values. It's not that important for my issue. The issue will occur whatever value <code>prediction_type</code> has. Here's an example of sample <code>datum</code>:</p>
  
  <pre><code>datum = [{created_at: "2017-12-29T02:28:31.290Z", confidence: 0.5, lower_bound: 1, upper_bound: 10}     
  {created_at: "2017-12-29T02:28:43.283Z", confidence: 0.6, lower_bound: 5, upper_bound: 7}     
  {created_at: "2017-12-29T02:28:57.074Z", confidence: 0.7, lower_bound: 8, upper_bound: 13}     
  {created_at: "2017-12-29T02:32:27.891Z", confidence: 0.6, lower_bound: 8, upper_bound: 20}     
  {created_at: "2017-12-29T02:34:08.463Z", confidence: 0.95, lower_bound: 6, upper_bound: 10}]
  </code></pre>
  
  <p>And an example of sample <code>data</code>: <code>{ test@yahoo.com: datum }</code></p>
  
  <p>There are no dots and the x axis values are duplicated.</p>
  
  <p><img src="https://i.stack.imgur.com/Flrhp.png" alt="enter image description here"></p>