Failed to use with Chart.js 3.0.2 and time x axis

[foton]

Hi, I updated our project our project dependecies to

chart.js@>=3.0.2, chart.js@^3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.0.2.tgz#5893b0548714445b5190cbda9ac307357a56a0c7"
  integrity sha512-DR0GmFSlxcFJp/w//ZmbxSduAkH/AqwxoiZxK97KHnWZf6gvsKWS3160WvNMMHYvzW9OXqGWjPjVh1Qu+xDabg==

chartjs-adapter-date-fns@>=2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
  integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==

and have (testing) graph like

async renderChart2() {
    var speedCanvas = document.querySelector("#chart-2 canvas")

    var speedData = {
      labels: ["2021-01-01T23:00:00.000Z", "2021-01-02T23:00:00.000Z", "2021-01-03T23:00:00.000Z", "2021-01-04T23:00:00.000Z", "2021-01-05T23:00:00.000Z", "2021-01-06T23:00:00.000Z", "2021-01-07T23:00:00.000Z"],
      datasets: [{
        label: "Car Speed",
        data: [0, 59, 75, 20, 20, 55, 40],
        lineTension: 0,
        fill: false,
        borderColor: 'orange',
        backgroundColor: 'transparent',
        pointBorderColor: 'orange',
        pointBackgroundColor: 'rgba(255,150,0,0.5)',
        borderDash: [5, 5],
        pointRadius: 5,
        pointHoverRadius: 10,
        pointHitRadius: 30,
        pointBorderWidth: 2,
        pointStyle: 'rectRounded'
      }]
    }

    var chartOptions = {
      responsive: true,
      legend: {
        display: true,
        position: 'top',
        labels: {
          boxWidth: 80,
          fontColor: 'black'
        }
      },
      scales: {
        x: {
          type: "time",
          grid: {
            display: false,
            color: "black"
          },
          title: {
            display: true,
            text: "Time in Seconds",
            color: "red"
          }
        },
        y: {
          grid: {
            color: "black",
            borderDash: [2, 5],
          },
          title: {
            display: true,
            text: "Speed in Miles per Hour",
            color: "green"
          }
        }
      }
    }
    const Chart = await this.chart()

    var lineChart = new Chart(speedCanvas, {
      type: 'line',
      data: speedData,
      options: chartOptions
    })
  }

  async chart() {
      const { Chart, registerables } = await import('chart.js')
      Chart.register(...registerables)

      return Chart
    }

And when I set some axis to be type: "time" , rendering of graphs fails

I am not strong in JS, but I digg deep and it seems to me that this

import { toDate, parse, parseISO, isValid, format, addYears, addQuarters, addMonths, addWeeks, addDays, addHours, addMinutes, addSeconds, addMilliseconds, differenceInYears, differenceInQuarters, differenceInMonths, differenceInWeeks, differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds, differenceInMilliseconds, startOfYear, startOfQuarter, startOfMonth, startOfWeek, startOfDay, startOfHour, startOfMinute, startOfSecond, endOfYear, endOfQuarter, endOfMonth, endOfWeek, endOfDay, endOfHour, endOfMinute, endOfSecond } from 'date-fns';

....

_adapters._date.override({
....
  format: function(time, fmt) {
    return format(time, fmt, this.options);
  },

do not call date-fns.format but itself again.

When I did litlle rename and change call in chart.js _tickFormatFunction(time, index, ticks, format) :

  xformat: function(time, fmt) {
    return format(time, fmt, this.options);
  },

all went OK

[kurkle]

I'd guess this is because you are importing chart.js asynchronously and the adapter needs to be imported after chart.js

The editing you did is wrong in many ways. After that the format function is not called (because chart.js calls adapter.format, not adapter.xformat).
It should have defaulted to the abstract format:
throw new Error('This method is not implemented: Check that a complete date adapter is provided.');
But if it did not, then you either have another adapter installed or date-fns adapter is included multiple times.

[foton]

@kurkle Thanks for explanation.