so I got this chartJS (react) element which is working perfectly well when I use hardcoded data:

         <Line data={{
                    labels: ['2022-07-04', '2022-07-03', '2022-07-02', '2022-06-27'],
                    datasets: [
                      {
                        label: 'My First dataset',
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: 'rgba(75,192,192,0.4)',
                        borderColor: 'rgba(75,192,192,1)',
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: 'rgba(75,192,192,1)',
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                        pointHoverBorderColor: 'rgba(220,220,220,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: [3.1, 3.1, 3.1, 2.74]
                      },
                    ]
               }}
           />

However when I change the data and labels to my arrays which I push the exact same data to and which returns the exact same array when I console log it, it doesn't fill up the chart.

         <Line data={{
                    labels: dateArray,
                    datasets: [
                      {
                        label: 'My First dataset',
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: 'rgba(75,192,192,0.4)',
                        borderColor: 'rgba(75,192,192,1)',
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: 'rgba(75,192,192,1)',
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                        pointHoverBorderColor: 'rgba(220,220,220,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: priceArray
                      },
                    ]
               }}
              />

Note that for the hardcoded data, I console logged my arrays and copied and pasted them into the data object. How could this possibly not work?

I know the price and date array are backwards btw, don't worry about that, it works either way.