Adding Chart.JS time cartesian (time.unit: second ) xAxes only shows 1 second difference in C#

I have 3 sets of data that have a timestamp (x) and value (y). I have tried to use guides and documentation to try to use the options scale xAxes type: “time” unit seconds. The graph shows nothing but y values on the y axes, labels and a 1 second difference on the x axes.
My code.
Basically, when i add the option to set the unit to seconds my chart breaks. I have no idea why.
Any suggestions would be helpful.

   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

    <div class="chartBox">
        <canvas id="myChart"></canvas>
    </div>
    <script>
        const ctx = document.getElementById('myChart').getContext('2d');
        const myChart = new Chart(ctx, {
            type: 'line',
            data: {

                datasets: [{
                    label: 'Melt Gas',
                    data: [{x: '2021-12-6 T 4:42:51' , y:43.450000},
{x: '2021-12-6 T 4:47:51' , y:44.440000},
{x: '2021-12-6 T 4:52:51' , y:45.280000},
{x: '2021-12-6 T 4:57:51' , y:45.940000},
{x: '2021-12-6 T 5:2:51' , y:46.710000},
{x: '2021-12-6 T 5:7:51' , y:47.480000},
{x: '2021-12-6 T 5:12:51' , y:48.140000},
{x: '2021-12-6 T 5:17:51' , y:48.910000},
{x: '2021-12-6 T 5:22:51' , y:49.690000},
{x: '2021-12-6 T 5:27:51' , y:50.350000},
{x: '2021-12-6 T 5:32:51' , y:51.130000},
],
                    backgroundColor: [
                      'rgba(54, 162, 235, 0.2)'
                    ],
                    borderColor: [
                        'rgba(54, 162, 235, 1)'
                    ],
                    tension: .4
                }, {label: 'Spin Gas',
                    data: [{x:'2021-12-6T4:44:5' , y:7.470000},
{x:'2021-12-6T4:49:5' , y:7.680000},
{x:'2021-12-6T4:54:5' , y:7.820000},
{x:'2021-12-6T4:59:5' , y:7.960000},
{x:'2021-12-6T5:4:5' , y:8.100000},
{x:'2021-12-6T5:9:5' , y:8.240000},
{x:'2021-12-6T5:14:5' , y:8.360000},
{x:'2021-12-6T5:19:5' , y:8.490000},
{x:'2021-12-6T5:24:5' , y:8.630000},
],
                    backgroundColor: [
                        'rgba(255, 206, 86, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 206, 86, 1)'
                    ],
                    tension: .4
                }, {label: 'T5 OVEN Gas',
                    data: [{x:'2021-12-6T4:44:11' , y:23.140000},
{x:'2021-12-6T4:49:11' , y:23.520000},
{x:'2021-12-6T4:54:11' , y:24.000000},
{x:'2021-12-6T4:59:11' , y:24.390000},
{x:'2021-12-6T5:4:11' , y:24.770000},
{x:'2021-12-6T5:9:11' , y:25.130000},
{x:'2021-12-6T5:14:11' , y:25.550000},
{x:'2021-12-6T5:19:11' , y:26.030000},
{x:'2021-12-6T5:24:11' , y:26.440000},
{x:'2021-12-6T5:29:11' , y:26.730000},
{x:'2021-12-6T5:34:11' , y:27.000000},
{x:'2021-12-6T5:39:11' , y:27.310000},
{x:'2021-12-6T5:44:11' , y:27.590000},
{x:'2021-12-6T5:49:11' , y:27.970000},
{x:'2021-12-6T5:54:11' , y:28.430000},
],
                    backgroundColor: [

                        'rgba(153, 102, 255, 0.2)'
                    ],
                    borderColor: [
                       'rgba(153, 102, 255, 1)'
                    ],
                    tension: .4
                }],
            },
            options: {
                scales: {
                    xAxes: @*[ added/removed*@{
                        type: "time",
                        time: {
                            unit: "second", //when i this section the graphs breaks.
                        },
                        parser: true,//also have removed this/added
                    }@*] added/removed*@,
                    y: {
                        beginAtZero: false
                    }
                }
            }
        });
    </script>