Chart.js – Unable to see tooltips on hover while using moment

I have created a line chart and on hover of the points am not able to see the tooltips. It seems to throw error while hovering on line points. TypeError: Cannot read property 'format' of undefined

So far I was able to render the line chart with time data which required the adapters. As per the docs, tried changing the units and wanted to see axis labels but that is also not visible. Below is the Chart configuration and fiddle:

var data = [{
    "t": 1622287843965,
    "y": "35181.38"
  },
  {
    "t": 1622288064247,
    "y": "35779.44"
  },
  {
    "t": 1622288261196,
    "y": "35681.55"
  },
  {
    "t": 1622288644294,
    "y": "35552.49"
  }
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [{
      label: `Price`,
      data: data,
      backgroundColor: "rgba(134,159,152, 1)",
      borderColor: "rgba(174, 305, 194, 0.4)"
    }],
  },
  options: {
    parsing: {
      yAxisKey: 'y',
      xAxisKey: 't',
    },
    scales: {
      xAxis: {
        adapters: {
          date: {}
        },
        ticks: {
          source: "labels"
        },
        display: true,
        type: 'time',
        time: {
          unit: 'day'
        }
      }
    },

  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0/dist/chartjs-adapter-date-fns.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

Answer

This is because you added an adapter but forgot to add the corosponding date library. See working example:

var data = [{
    "t": 1622287843965,
    "y": "35181.38"
  },
  {
    "t": 1622288064247,
    "y": "35779.44"
  },
  {
    "t": 1622288261196,
    "y": "35681.55"
  },
  {
    "t": 1622288644294,
    "y": "35552.49"
  }
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [{
      label: `Price`,
      data: data,
      backgroundColor: "rgba(134,159,152, 1)",
      borderColor: "rgba(174, 305, 194, 0.4)"
    }],
  },
  options: {
    parsing: {
      yAxisKey: 'y',
      xAxisKey: 't',
    },
    scales: {
      x: {
        adapters: {
          date: {}
        },
        ticks: {
          source: "labels"
        },
        display: true,
        type: 'time',
        time: {
          unit: 'day'
        }
      }
    },

  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>