Weird behaviour when updating annotations on Chart.js ^3.1.0

[aanilyildiz]

I have created mouse events on the chart that updates my line annotations and box annotation based on mouse movement.
Here is an example code of what I'm doing

this.chart.options.plugins.annotation = {
        dblClickSpeed: 0,
        annotations: [
          {
            type: 'line',
            value: 20,
            endValue: 20,
            scaleID: 'x2',
            borderColor: '#1FC054',
            borderWidth: 6,
            click: () => {
              if (!this.isOnLine2) {
                this.isOnLine1 = true;
              }
            },
            enter: () => {
              if (!this.isOnLine2) {
                this.isOnLine1 = true;
              }
            }
          },
          {
            type: 'line',
            value: 80,
            endValue: 80,
            scaleID: 'x2',
            borderColor: '#1FC054',
            borderWidth: 6,
            click: () => {
              if (!this.isOnLine1) {
                this.isOnLine2 = true;
              }
            },
            enter: () => {
              if (!this.isOnLine1) {
                this.isOnLine2 = true;
              }
            }
          },
          {
            type: 'box',
            xMin: 20,
            xMax: 80,
            xScaleID: 'x2',
            backgroundColor: 'rgba(31, 192, 84, 0.15)',
            borderWidth: 0
          }
        ]
      };
    //
    some code
    //
    this.chart.canvas.onmousedown = () => {
      this.isClickingCanvas = true;
    };

    this.chart.canvas.onmousemove = (event) => {
      if (this.isClickingCanvas && this.chart.options.plugins?.annotation?.annotations?.length) {
        const newX = (event.clientX / this.canvasWidth) * 100;
        if (this.isOnLine1) {
          this.chart.options.plugins.annotation.annotations[0].value = newX;
          this.chart.options.plugins.annotation.annotations[0].endValue = newX;
          if (this.chart.options.plugins.annotation.annotations[2].type === 'box') {
            this.chart.options.plugins.annotation.annotations[2].xMin = newX;
          }
          this.dataService.dataInterval.min = newX;
          this.chart.update();
        }
        if (this.isOnLine2) {
          this.chart.options.plugins.annotation.annotations[1].value = newX;
          this.chart.options.plugins.annotation.annotations[1].endValue = newX;
          if (this.chart.options.plugins.annotation.annotations[2].type === 'box') {
            this.chart.options.plugins.annotation.annotations[2].xMax = newX;
          }
          this.dataService.dataInterval.max = newX;
          this.chart.update();
        }
      }
    };
    
    this.chart.canvas.onmouseup = () => {
      this.isClickingCanvas = false;
      this.isOnLine1 = false;
      this.isOnLine2 = false;
    };
    this.chart.canvas.onmouseleave = () => {
      this.isClickingCanvas = false;
      this.isOnLine1 = false;
      this.isOnLine2 = false;
    };

The lines use a hidden x axis. When the events fire, x ticks gets hidden and the annotations doesn't get updated even though the values do.
This code works as intended in Chart.js 3.0.2.

[kurkle]

Does changing the annotations from array to object help?
Just trying to narrow it down.

[aanilyildiz]

Does changing the annotations from array to object help?
Just trying to narrow it down.

Suprisingly it worked as an object