title: Rechart legend mismatch formated datakey
body: <p>I am using Recharts to build a graph with the following data:</p>
  
  <pre><code>id: "mock-device"
  props:
    battery: 2,
    cpuUsage: 11,
    diskUsage: 23,
    memoryUsage: 8,
  timestamp: 1548031944
  </code></pre>
  
  <p>and I am building my graph </p>
  
  <pre><code>&lt;AreaChart data={DataGraphs} margin={{ top: 0, right: 0, bottom: 0, left: -30 }}&gt;
    &lt;CartesianGrid strokeDasharray="3 3" /&gt;
    &lt;XAxis dataKey="timestamp" tickFormatter={e =&gt; (new Date(e * 100).toLocaleTimeString())} /&gt;
    &lt;YAxis /&gt;
    &lt;Tooltip /&gt;
    &lt;Legend /&gt;
    &lt;Area dataKey={battery} stroke="#f3a000" fill="#ffc658" /&gt;
    &lt;Area dataKey={cpu} stroke="#e4002b" fill="#ff0131a3" /&gt;
    &lt;Area dataKey={memory} stroke="#0ea800" fill="#0ea8008c" /&gt;
    &lt;Area dataKey={diskUsage} stroke="#009cff" fill="#5abefd" /&gt;
  &lt;/AreaChart&gt;
  </code></pre>
  
  <p>The problem occurs when the tooltip is displayed, as we can see the title mismatch the tick formatter</p>
  
  <p><a href="https://i.stack.imgur.com/wx0dU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wx0dU.png" alt="enter image description here"></a></p>
  
  <p>So, how can I make both match as they are basically the same information ?</p>