title: How to use UTC date string as recharts axis and distribute it evenly
body: <p>My source of data looks like this:</p>
  
  <pre><code>const data = [
      { dataora: "2019-10-20T04:00:00Z", valore: -0.04 },
      { dataora: "2019-10-20T05:00:00Z", valore: -0.03 },
      { dataora: "2019-10-20T06:00:00Z", valore: -0.03 },
      { dataora: "2019-10-20T07:00:00Z", valore: -0.03 },
      { dataora: "2019-10-21T10:00:00Z", valore: -0.04 },
      { dataora: "2019-10-21T23:00:00Z", valore: -0.04 },
      { dataora: "2019-10-22T00:00:00Z", valore: -0.04 }
    ];
  </code></pre>
  
  <p>My <code>recharts</code> component looks like this:</p>
  
  <pre><code>&lt;LineChart width={600} height={300} data={data}&gt;
    &lt;Line type="monotone" dataKey="valore" stroke="black" strokeWidth={2} dot={false} /&gt;
    &lt;CartesianGrid stroke="#ccc" /&gt;
    &lt;XAxis
      dataKey={'dataora'}
      tickFormatter={dateFormatter}
    /&gt;
    &lt;YAxis /&gt;
  &lt;/LineChart&gt;
  </code></pre>
  
  <p><code>dateFormatter</code> looks like this:</p>
  
  <pre><code>const dateFormatter = date =&gt; {
    // return moment(date).unix();
    return moment(date).format('DD/MM/YY HH:mm');
  };
  </code></pre>
  
  <p>Usually I have a data entry every other hour, but <code>2019-10-21</code> has only two values for the whole day, now I'd like to show also the missing hours in my graph. In other data entries I may get different time gap so I can't set the tick interval manually.. I just need the date field to be distributed evenly on the XAxis.</p>
  
  <p>I tried to change the <code>tickFormatter</code> to return the date in Unix epoch seconds and use the below props..</p>
  
  <p><code>scale="time" type="number" domain={[dateFormatter(data[0].dataora), dateFormatter(data[1].dataora)]}</code></p>
  
  <p>but the XAxis dissapeared along with the data line.
  Is there any way to "fill in" those date blanks?</p>
  
  <p><a href="https://codesandbox.io/s/vigilant-pine-mtdxn" rel="nofollow noreferrer">A codesandbox</a></p>