Chartjs-Date and time chart With Chart js

by

2👍

✅

Your code is almost fine, I noticed a few problems however.

  • you must also include the chartjs-adapter-moment library.
  • instead of a 'line' chart, you could use a 'scatter' chart and define showLine: true.
  • labels must be omitted when providing the data as an array of points (objects with x and y propertie seach).
  • the scales.x must be defined as an object but not as an array.
  • etc.

Please take a look at your runnable, amended code and see how it could work.

new Chart('myChart', {
  type: 'scatter',
  data: {
    datasets: [{
      label: 'My Dataset',
      data: [
        { x: '2022-11-06', y: '02:00' }, 
        { x: '2022-11-07', y: '08:00' }, 
        { x: '2022-11-08', y: '06:00' }
      ],
      showLine: true,
      lineTension: 0.3,
      borderColor: 'rgb(100, 100, 255)'
    }],
  },
  options: {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'D MMM yyyy'
          }
        }
      },
      y: {
        type: 'time',
        time: {
          parser: 'HH:mm',
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'HH:mm'
          },
          tooltipFormat: 'HH:mm'
        },
        ticks: {
          min: '00:00',
          max: '08:00'
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment