Why are there connections between these points in chartjs? - html

Question

I have an angular apllication I which I display a chart. The chart is filled with data from a database. The y axis displays sensordata and the x axis displays a timestamp. The timestamp is also a column in the database. When I start the app there are connections between some points that I don´t want and that don´t make sense! Why is that so?
ngOnInit(): void {
var chartOptions = {
plugins: {
legend: {
display: false
}
},
responsive: true,
maintainAspectRatio: false,
animation: {duration: 0}
};
var tempChart = new Chart('tempChart', {
type: 'line',
data: {
labels: [],
datasets: [{
data: [0],
borderWidth: 1
}]
},
options: chartOptions
});
setInterval(() => {
// API request
this.service.getMesswerte().subscribe({
next: data => {
this.chartData = data;
this.fillChartData(this.chartData);
}
})
}, 1000)
setInterval(() => {
tempChart.data.datasets[0].data = this.tempArray;
tempChart.update();
}, 1000)
}
private fillChartData(chartData: Object)
{
this.objects = Object.values(chartData);
for(let row in this.objects)
{
this.tempObject = {
x: this.objects[row].timestamp,
y: this.objects[row].airtemp
}
this.tempArray.push(this.tempObject);
}
}