Line annotation not updating position although update() called

My line annotation is not changing its position although i'm rerendering the chart. I can't figure out how to update the annotation line dynamically.

videolist.component.html

<c-card-body>
<c-chart [data]="chartData" [options]="chartOptions" type="line" (chartRef)="handleChartRef($event)"></c-chart>
</c-card-body>


videolist.component.ts

ngOnInit(): void {
this.loadData();
Chart.register(...registerables, annotationPlugin);

this.chartOptions = {
responsive: true,
plugins: {
annotation: {
annotations: {
videoMarker: {
type: 'line',
xMin: 0,
xMax: 0,
borderColor: 'red',
borderWidth: 2
}
}
}
},
scales: {
x: {
grid: {
display: false,
drawBorder: false
},
callback: (value: any, index: number) => {
return this.chartData.displayLabels[index] || '';
}
}
},
};
}

....
....
....

loadGraphData(cloudLivestreamMetaId: string): void {
this.graphAvailable = true;

this.videoMetaService.getVideoCloudLivestreamMeta(cloudLivestreamMetaId).subscribe({
next: (metaData: { flightData: { battery: number; date: string; height: number; speed: number }[] }) => {
if (!metaData || !metaData.flightData || metaData.flightData.length === 0) {

return;
}

// Sortiere die Daten nach Zeitstempel
const sortedFlightData = metaData.flightData.sort(
(a, b) => new Date(a.date).getTime() - new Date(b.date).getTime()
);

const newLabels = sortedFlightData.map(data => new Date(data.date).getTime()); // Zeitstempel
const displayLabels = sortedFlightData.map(data => new Date(data.date).toLocaleTimeString()); // Anzeige

const newBatteryData = sortedFlightData.map(data => data.battery);
const newHeightData = sortedFlightData.map(data => data.height);
const newSpeedData = sortedFlightData.map(data => data.speed);

// Aktualisiere die Chart-Daten
this.chartData = {
labels: newLabels,
displayLabels: displayLabels,
datasets: [
{ ...this.chartData.datasets[0], data: newBatteryData },
{ ...this.chartData.datasets[1], data: newHeightData },
{ ...this.chartData.datasets[2], data: newSpeedData }
]
};

if (this.chartRef) {
this.chartRef.update();
}

this.graphLoaded = true;

setTimeout(() => {
console.log('X-Achse min:', this.chartRef.scales.x.min); // -> 0
console.log('X-Achse max:', this.chartRef.scales.x.max); // -> 181

const marker = this.chartRef.options.plugins.annotation.annotations.videoMarker;

marker.xMin = 110;
marker.xMax = 110;

this.chartRef.update();

}, 5000);


},
error: (error) => {
console.error(error);
}
});
}


So as i'm thinking this is a minimum example i cant get why it isn't working. If i set the xMin to (for example) 91 in ngOnInit the line correctly starts at 91. For testing purposes i setted xMin and xMax directly in my code inside the loadGraphData() function

Continue reading...