Chart is not rendering properly time axis

Question

I have a lists of utc timestamps, ready to parse into ChartJS 2.9.3, the graph couldn't show the x-axis time and data is not showing.

Config

let chartConfig = {
    type: "line",
    data: {
        labels: [],
        datasets: [
            {
                pointRadius: 0,
                data: [],
                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
                },
                time: {
                    parser: 'HH:mm:ss',
                    tooltipFormat: 'HH:mm:ss',
                    unit: 'minute',
                    unitStepSize: 5,
                    displayFormats: {
                        'second': 'ss A',
                        'minute': 'hh:mm A',
                        'hour': 'HH:mm A'
                    }
                }
            }],
            yAxes: [{
                ticks: {min: 0, max: 150, stepSize: 10 }
            }]
        }
    }
}

Labels (x-axis)

Generates through moment(timestamp).format("HH:mm:ss")

["22:02:30","22:03:00","22:03:30","22:4:00","22:05:00".,"22:07:00","22:10:00"]

Data (y-axis)

[60,78,89,100,120,45,55]

Problem

Answer 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>