title: Change background point color at runtime for angular ng2-charts / chartjs
body: <p>I am adding <strong>chartjs</strong> in my application &amp; want to change particular point background color based on condition at runtime. I am able to plot the chart correctly but don't know how to change plot color. </p>
  
  <p>From <strong>chartjs</strong> document I understand we can do it using pointBackgroundColor but all example online is with design time example. </p>
  
  <p>I tried with  <code>this._chart.chart.data.datasets[0].pointBackgroundColor = "red";</code>  but its changed to all points and not to particular points</p>
  
  <p><a href="https://i.stack.imgur.com/3lmeC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3lmeC.png" alt="enter image description here"></a></p>
  
  <p>My version : <br>
  Angular ver 6 <br>
  chartjs ver 2.7.3<br>
  ng2-charts  1.6.0<br></p>
  
  <p>Component.ts code</p>
  
  <pre><code>@ViewChild(BaseChartDirective) public _chart: BaseChartDirective;
  
  constructor(private router: Router, private _realtimeData  : RealtimeDataService) { 
   this._realtimeData.getRealtimeData(1)).subscribe(data =&gt; 
  {
  for (let stat of data) 
  {
      this.labels.push(newDate(stat.DateTime).toLocaleDateString('de-IN', this.options));
  
      this.datasets_lines[0].data.push(stat.value);
      this.datasets_lines[1].data.push(stat.value1);
      this.datasets_lines[2].data.push(stat.vlue2);
  
      if ((stat.value &gt; stat.value1) || (stat.value&lt; stat.vlue2))
      {
      this._chart.chart.data.datasets[0].pointBorderColor = "red";
      }
      else
      {
      this._chart.chart.data.datasets[0].pointBorderColor = "black";
      } 
  
      this._chart.chart.update();
  }
  }
  }
  
  public chartColors: Array&lt;any&gt; = [
    { // first color
      borderColor: "#36ff2f",
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
    },
  
    { // first color
      borderColor: '#1780cc',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
  
    },
  
    { // second color
      borderColor: '#ed8b00',
      pointBackgroundColor: 'rgba(225,10,24,0.2)',
      pointBorderColor: '#fff',
    }];
  </code></pre>
  
  <p>HTML Code</p>
  
  <pre><code>&lt;canvas 
        #mylinechart
        baseChart
        [chartType]="'line'"
        [datasets]="datasets_lines"
        [labels]="labels"
        [options]="chartOptions"
        [legend]="true"
        [colors]="chartColors"
    &lt;/canvas&gt;
  </code></pre>