Chartjs-Adding hours and minutes to a date object for time axis

by

0👍

✅

This is fairly trivial to achieve with moment.js, which is what Chart.js expects time formats to be.

The code can be greatly simplified as shown in the example below.

Use the Chart.js time axis display format options to control the formatting of the labels.

var ctx = document.getElementById('myChart');
var HourLabels = [];
var MinLables = [54, 83, 155, 192, 206, 238, 285, 307, 335, 367, 431, 444, 495, 548, 604, 651, 680, 721, 777, 789, 859, 936, 980, 1004, 1047, 1089, 1122, 1135, 1200, 1245, 1323, 1381, 1396]

for (let i = 0; i < MinLables.length; i++) {
  let starttime = moment('2020-03-12T11:00:00');
  starttime.add(MinLables[i], 'minutes');
  HourLabels.push(starttime)
}

var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: HourLabels,
    datasets: [{
      label: "Messwert",
      xAxisID: 'xAxis0',
      data: [196.0, 222.0, 251.0, 272, 258, 298, 293, 235, 269, 226, 223, 242, 246, 290, 267, 261, 285, 274, 243, 200, 197, 203, 219, 269, 238, 268, 271, 280, 252, 266, 282, 296, 289, 300, 291],
      lineTension: 0,
      fill: false,
      borderColor: 'orange',
      backgroundColor: 'transparent',
      borderDash: [5, 5],
      pointBorderColor: 'orange',
      pointBackgroundColor: 'rgba(255,150,0,0.5)',
      pointRadius: 5,
      pointHoverRadius: 10,
      pointHitRadius: 30,
      pointBorderWidth: 2,
      pointStyle: 'rectRounded'
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: true,
      position: "left",
      labels: {
        fontColor: 'rgb(255, 99, 132)'
      }
    },
    scales: {
      xAxes: [{
        id: 'xAxis0',
        type: "time",
        time: {
          unit: 'hour',
          stepSize: 1,
          displayFormats: {
            hour: 'H',
          }
        },
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment