Chartjs-ChartJS: Full Date for xAxis Labels?

by

0👍

✅

You can use property time.displayFormats according to Display Formats from Chart.js documentation. See Moment.js for the allowable format strings.

time: {
  unit: 'hour',
  displayFormats: {
    hour: 'MMM DD HH:mm'
  },
  tooltipFormat: 'MMM DD HH:mm'
}

Please have a look at your amended code below.

new Chart(document.getElementById('canvas'), {
  type: 'line',
  data: {
    datasets: [{
      label: 'Dataset 1',
      backgroundColor: 'red',
      borderColor: 'red',
      fill: false,
      data: [
        { x: '2020-04-10 13:00', y: 60 }, 
        { x: '2020-04-12 06:00', y: 100 }, 
        { x: '2020-04-12 13:00', y: 5 }
      ],
    }, {
      label: 'Dataset 2',
      backgroundColor: 'blue',
      borderColor: 'blue',
      fill: false,
      data: [
        { x: '2020-04-10 13:00', y: 45 }, 
        { x: '2020-04-11 13:00', y: 65 }, 
        { x: '2020-04-12 06:00', y: 80 }, 
        { x: '2020-04-12 13:00', y: 65 }
      ]
    }]
  },
  options: {
    title: {
      text: 'Time Scale'
    },
    scales: {
      xAxes: [{
        type: 'time',
        time: {
          unit: 'hour',
          displayFormats: {
            hour: 'MMM DD HH:mm'
          },
          tooltipFormat: 'MMM DD HH:mm'
        },
        scaleLabel: {
          display: true,
          labelString: 'Date'
        }
      }],
      yAxes: [{
        display: true,
        scaleLabel: {
          display: true,
          labelString: 'Value'
        }
      }]
    },
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="canvas" height="90"></canvas>

Leave a comment