title: react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong
body: <p>I have a line chart with multiple datasets, and time on X-axes. I have two data sets. In one, x = 4. In the other one, x = 1, Basically 1 should go below 4. But it's not. 1 is going above 4. 
  The lines are not overlapping. here is my code</p>
  
  <p>Here is the code in stack blitz - <a href="https://stackblitz.com/edit/line-chart-with-time-on-xaxes" rel="nofollow noreferrer">https://stackblitz.com/edit/line-chart-with-time-on-xaxes</a></p>
  
  <p>This is how the graph looks like
  <a href="https://i.stack.imgur.com/82RiB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/82RiB.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/GTIdz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GTIdz.png" alt="enter image description here"></a></p>
  
  <p>Yellow line and the red line should cross. But it's not crossing. Is this normal in time charts? Is there any way to fix this? </p>