This method is not implemented: Check that a complete date adapter is provided

Trying to create a line graph that uses D3, Chart.js and Dayjs with a date adapter but I keep running into problems. The line graph has takes the price (x axis) and the timestamp (y axis) from a file named "average_history.csv".

Keep getting "Error: This method is not implemented: Check that a complete date adapter is provided" in the console when trying the following code:

// Register the Day.js adapter plugin with Chart.js
Chart.register({
  id: 'dayjs',
  beforeInit: function(chart) {
    chart.data.labels = chart.data.labels.map(function(label) {
      return dayjs(label).format('YYYY-MM-DD');
    });
  }
});

 // Load data from CSV file
d3.csv("average_history.csv")
  .then(function(data) {
    data.forEach(function(d) {
      console.log(d.timestamp);
      console.log(d.price);
      d.x = new Date(d.timestamp);
      d.y = parseFloat(d.price);
    });
  var parsedData = data;

// Create line chart
 var chart = new Chart(document.getElementById('lineGraph'), {
    type: "line",
    data: {
      datasets: [{
        label: "Price",
        data: parsedData,
        borderColor: "blue",
        fill: false
      }]
    },
    options: {
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'day'
          },
          position: 'left'
        },
        y: {
          ticks: {
            callback: function(value, index, values) {
              return "$" + value.toFixed(2);
            }
          }
        }
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function(context) {
              return "$" + context.parsed.y.toFixed(2);
            }
          }
        }
      }
    }
  });
})
.catch(function(error) {
    console.log(error);
  });

    // Add event listener to show tooltip on hover
    document.getElementById("lineGraph").addEventListener("mousemove", function(event) {
        var chartArea = chart.chartArea;
        var tooltipEl = document.getElementById("tooltip");
        var x = event.clientX - chartArea.left;
        var y = event.clientY - chartArea.top;

        if (x >= 0 && x <= chartArea.width && y >= 0 && y <= chartArea.height) {
            var tooltipModel = chart.getElementsAtEvent(event)[0]._model;
            tooltipModel.caretY = y;
            tooltipEl.style.display = "block";
            tooltipEl.style.left = chartArea.left + tooltipModel.x + "px";
            tooltipEl.style.top = chartArea.top + tooltipModel.y + "px";
            tooltipEl.innerHTML = "$" + tooltipModel.yLabel.toFixed(2);
        }
    });

    // Add event listener to update chart based on time range selection
    document.getElementById("timeRangeSelector").addEventListener("change", function() {
        var timeRange = this.value;
        var startDate = dayjs().subtract(timeRange, "day").toDate();
        var filteredData = parsedData.filter(function(d) {
            return d.x >= startDate;
        });

        chart.data.datasets[0].data = filteredData;
        chart.update();
    });

The error is specifically pointing to this line: var chart = new Chart(document.getElementById('lineGraph'), {

Here is the relevant HTML:

<head>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/customParseFormat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/advancedFormat.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/isoWeek.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/quarterOfYear.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.7/plugin/localizedFormat.js"></script>
    <script src="/plugins_dayjs/bundledchartjs.js"></script>
</head>
<body>

<div class="p-3">
          <div id="lineGraphContainer">
            <canvas id="lineGraph"></canvas>
          </div>

          <select id="timeRangeSelector">
              <option value="24h">24H</option>
              <option value="3d">3D</option>
              <option value="7d">7D</option>
              <option value="30d">1M</option>
              <option value="90d">3M</option>
              <option value="6m">6M</option>
              <option value="1y">1Y</option>
          </select>
        </div>
</body>

Here is what "average_history.csv" looks like:

timestamp,price
2023-04-22 21:25:42.309456,3789.42
2023-04-22 21:30:01.578855,3755.11
2023-04-22 23:58:57.979540,3754.38

Numerous problems with getting this adapter to work locally have arisen, and this is the latest one I can't seem to figure out. Maybe somehow there's a problem with my formatting for the x axis? Or maybe it can't read the date correctly? I can't figure it out after spending hours looking at documentation.

bolstycjw / chartjs-adapter-dayjs-4

This method is not implemented: Check that a complete date adapter is provided #4