Chart.js time scale axis showing large numbers instead of dates

I’m trying to create a google sheets web app that’ll read the data from the spreadsheet to generate this chart, which is why I am using vanilla JS.

function getEventEntries() {
  function createChart(args) {
    const ctx = document.getElementById("myChart").getContext("2d");
    const cfg = {
      type: 'scatter',
      data: {
        datasets: [{
          label: 'Events',
          data: args
         }],
         options: {
          scales: {
            x: { type: 'time' },
            y: { type: 'linear' }
          }
        }
      }
    };
    
    const myChart = new Chart(ctx, cfg);
  }
  
  //get data from google sheets
  //google.script.run.withSuccessHandler(createChart).getEntries();
  
  // dummy data tests to figure out what formats will work
  var events = [{x: '2021-11-06 23:39:30', y: -3}, {x: '2008-04-12 13:30:14', y: 10}];
  var events1 = [{x: new Date('2021-11-06'), y: -3}, {x: new Date('2008-04-12'), y: 10}]; // actually plots data and creates an x-axis that isn't 0 to 1--still not showing date values for ticks tho
  
  createChart(events1);
}

function onLoad() {
  getEventEntries();
}

$(document).ready(onLoad);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<!-- I've tried date-fns and moment.js adapters with no luck either -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

 <canvas id="myChart"></canvas>

As you can see when you run my snippet, the x-axis doesn’t list dates in any format. It’s just large numbers. I’d like to get it to list readable dates, maybe MMM YYYY format.