Chartjs-Chart.js x axis date-time formatting fails

by

0👍

✅

Your chart config looks just fine after change Type: 'time' to type: 'time'. You can run the version below, which substitutes your Python template variables.

Here are some other things to check

  • After correcting the type typo, look for console errors.
  • Make sure moment.js is loading correctly.
  • Check the versions of moment.js and Chart.js (example below uses 2.26.0 and 2.9.3 respectively).
  • Provide the actual HTML source (instead of the template), because if it’s still broken it implies something wrong with the templating/passing values.
const config = {
  // The type of chart we want to create
  type: 'line', //types: bar, horizontalBar, pie, line, doughnut, radar, polarArea

  // The data for our dataset
  data: {
    labels: [new Date('2019-12-19T13:36:29-08:00'), new Date('2019-12-19T13:36:59-08:00'), new Date('2019-12-19T13:37:29-08:00'), new Date('2019-12-19T13:37:59-08:00'), new Date('2019-12-19T13:38:29-08:00')],
    datasets: [{
      label: 'Test String Dates',
      backgroundColor: 'rgba(255, 99, 132, 0)',
      borderColor: 'rgb(117, 4, 28)',
      borderWidth: 1,
      hoverBorderWidth: 3,
      hoverBorderColor: '#000',
      data: [0.05, 0.07, 0.15, 0.08, 0.05],
    }]
  },
  options: {
    title: {
      display: true,
      text: 'test string date time',
      fontSize: 25,
    },
    legend: {
      //display:false //to hide legend
      position: 'right',
      labels: {
        fontColor: '#000'
      }
    },
    tooltips: {
      //enabled:false,
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'mg/m3',
          fontColor: '#000',
          fontWeight: 'bold',
          fontSize: 25
        }
      }],
      xAxes: [{
        type: 'time',
        time: {
          parser: 'HH:mm:ss a', //these formatting values do nothing, I've tried a few different ones
          unit: 'second', //I have tried minutes and hours too, same result
          displayFormats: {
            'millisecond': 'HH:mm:ss a', //I have tried without the 'a' too, same result
            'second': 'HH:mm:ss a',
            'minute': 'HH:mm:ss a',
            'hour': 'HH:mm:ss a',
            'day': 'HH:mm:ss a',
            'week': 'HH:mm:ss a',
            'month': 'HH:mm:ss a',
            'quarter': 'HH:mm:ss a',
            'year': 'HH:mm:ss a',
          }
        },
        ticks: {
          source: 'auto'
        },
        scaleLabel: {
          display: true,
          labelString: 'Recording Time',
          fontColor: '#000',
          fontWeight: 'bold',
          fontSize: 25
        }
      }]
    },
    responsive: true,
    maintainAspectRatio: false,
    elements: {
      point: {
        radius: 0
      },
      line: {
        tension: 0
      }
    },
  }

};

const ctx = document.getElementById('canvas').getContext('2d');
new Chart(ctx, config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>

<body>
  <canvas id="canvas" width="600" height="400"></canvas>
</body>

Leave a comment