Generates a scatter chart on button click

HTML

<html>
    <head>
    </head>
    <body>
        <div class="wrapper" style="width: 98vw; height:180px">
            <canvas id="chart1"></canvas>
        </div>
        </button>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
    </body>
</html>

JavaScript

var chart1

function tick_label(xvalue) {
    console.log("xvalue:", xvalue, "type:", typeof(xvalue))
    return xvalue
}

function doit() {
  let t0 = 1742662800*1000; // Sat Mar 22 12:00:00 CDT 2025
  let N = 31
  data = [...Array(N)].map((a,i) =>
               ({ 'x': new Date(i*3600000+t0),
                 'y': ~~(Math.random()*40)
               }))  
  config = {
    type: "scatter",
    data: { datasets: [{ label: "Random Values", data: data }] },
    options: {
      scales: {
        x: { type: 'time', ticks: { callback: tick_label, color: 'red' } }
      }
    }
  }
  chart1 = new Chart(document.getElementById('chart1'), config);
}
doit()