Chartjs-Chart is not rendering properly time axis

by

1👍

✅

I took your code and everything works as expected as you can see below. The only thing I had to correct was removing a superfluous dot in the labels array.

new Chart('myChart', {
  type: "line",
  data: {
    labels: ["22:02:30", "22:03:00", "22:03:30", "22:4:00", "22:05:00", "22:07:00", "22:10:00"],
    datasets: [{
      pointRadius: 0,
      data: [60, 78, 89, 100, 120, 45, 55],
      backgroundColor: ['rgba(255, 99, 132, 0.2)'],
      borderColor: ['rgba(255,99,132,1)'],
      borderWidth: 1
    }]
  },
  options: {
    responsive: true,
    animation: {
      duration: 0
    },
    hover: {
      animationDuration: 0
    },
    responsiveAnimationDuration: 0,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        type: 'time',
        ticks: {
          source: "data",
          autoSkip: true,
          maxTicksLimit: 20,
          minRotation: 30
        },
        time: {
          parser: 'HH:mm:ss',
          tooltipFormat: 'HH:mm:ss',
          unit: 'minute',
          unitStepSize: 5,
          displayFormats: {
            'minute': 'hh:mm:ss A'
          }
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 150,
          stepSize: 10
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment