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

by

1👍

✅

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>

Leave a comment