Dynamically update value for horizontal line in annotation plugin for Chart.js in Angular 5

Question

Currently I have one horizontal line(drawn using chartjs-plugin-annotation) on bar chart(ng2-charts).The value is initially set in chart options "value: 25000" and chart is drawn, but after new chart data is pushed onto the dataset annotations (in ngOnInit method), value is not updated with new data from server(chart js is not refreshed with new data).

CODE in ts file:

    barChartOptions: any = {

    legend: {
      position: 'bottom',
      display:false,
      labels: {
        fontSize: 12
      },
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
        },
        scaleLabel: {
          display: true,
        }
      }],
      yAxes: [{
        gridLines: {
          display: true
        },
        scaleLabel: {
          display: true,
        },
        ticks: {
          min: 0,
          stepSize: 50000
        }
      }]
    },
    annotation: {
      annotations: [{
        drawTime: 'afterDatasetsDraw', // overrides annotation.drawTime if set
          id: 'a-line-1', // optional
          type: 'line',
          mode: 'horizontal',
          scaleID: 'y-axis-0',
          value: 25000,
          borderColor: 'red',
          borderWidth: 2,           
      }]
  },
    scaleShowVerticalLines: false,
    responsive: true,
    maintainAspectRatio: false

  }

CODE in the html:

<div class="barchart-details">
      <canvas height="450"
      baseChart 
      [datasets]="barChartData" 
      [labels]="barChartLabels"
      [options]="barChartOptions" 
      [colors]="lineChartColors"
      [legend]="barChartLegend" 
      [chartType]="barChartType" 
      (chartHover)="chartHovered($event)" 
      (chartClick)="chartClicked($event)"></canvas>
    </div>

How can I update property: 'value' dynamically with new data fetched from server

I tried this ----> this.barChartOptions.annotation.annotations[0].value = this.dataController.Mydata.value. it`s not working for me

Have you tried redrawing your chart ? Use a simple *ngIf for that. — user4676340
Thank you a lot ,it work`s :).Please add this comment as answer — zeon88

Unknown Unknown · Accepted Answer · 2018-03-13T12:24:22

When using chartJS, you need to redraw your chart at every change.

Using a simple condition on it should work.

Dynamically update value for horizontal line in annotation plugin for Chart.js in Angular 5

1 Answers