Chart is not rendering properly time axis - reactjs

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>