[Chartjs]-Ng2-charts and annotation plugin: annotations not visible after data update

by

0👍

this.barChartOptions.annotation.annotations

is not an array. It’s another object like in the example

const options = {
  plugins: {
    autocolors: false,
    annotation: {
      annotations: {
        line1: {
          type: 'line',
          yMin: 60,
          yMax: 60,
          borderColor: 'rgb(255, 99, 132)',
          borderWidth: 2,
        }
      }
    }
  }
};

So to add a new annotation, you need to add an object and not push an array element.
For example you get the number of annotations already in the object with

let annotationsCount = Object.entries(this.barChartOptions.annotation.annotations)

Then you can add a new element with

this.barChartOptions.annotation.annotations[annotationsCount] = yourNewAnnotationObject

annotationCount can be anything. It is just the key of the new object like line1 in the example Using the number of objects already inside is just a suggestion. BUT it has to be unique, otherwise you overwrite an existing and not adding a new one

0👍

You can try to set drawTime property

annotation: {
          drawTime: 'afterDatasetsDraw',
          annotations: [....]
        }

Leave a comment