react-chartjs-2 line chart with time on X-axes with multiple data sets plotted wrong

Viewed 4185

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

Here is the code in stack blitz - https://stackblitz.com/edit/line-chart-with-time-on-xaxes

This is how the graph looks like enter image description here

enter image description here

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?

1 Answers

The solution is added to the code. simply remove stacked: true, from yAxes: []

yAxes: [
   {
       // stacked: true,
       gridLines: {
           display: false,
           drawBorder: false
       },
       ticks: {
           display: false
       }
    }
]
Related