title: Set different color for each bars using ChartJS in Angular 4
body: <p>I'm very new to angular and I'm using ChartJS to plot a bar graph in my Angular 4 application. I want different colors for each bars. I did like what they say here <a href="http://www.chartjs.org/docs/latest/" rel="nofollow noreferrer">http://www.chartjs.org/docs/latest/</a>, but its not wokring</p>
  
  <p>Here's my html file:</p>
  
  <pre><code>&lt;div&gt;
    &lt;div style="display: block"&gt;
      &lt;canvas class="dashboard-tile-chart" baseChart
              [datasets]="barChartData"
              [labels]="barChartLabels"
              [options]="barChartOptions"
              [legend]="barChartLegend"
              [chartType]="barChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.ts file</p>
  
  <pre><code>export class BarGraphComponent implements OnInit {
  
    public barChartOptions: any = {
      scaleShowVerticalLines: false,
      responsive: true,
      scales: {
        xAxes: [{
          stacked: false,
          gridLines: {
            display: false
          }
        }],
        yAxes: [{
          stacked: false
        }]
      }
    };
    public barChartLabels: string[] = ['', '', '', '', '', '', ''];
    public barChartType = 'bar';
    public barChartLegend = false;
  
    public barChartData: any[] = [
        {
          data: [100, 150, 150, 100, 200, 150, 100],
          label: '',
          backgroundColor: [
            '#5cb85c',
            '#65C6BB',
            '#1BBC9B',
            '#f0ad4e',
            '#5cb85c',
            '#5cb85c',
            '#f0ad4e'
          ]
        }];
  }
  </code></pre>
  
  <p>data is showing, but different colors are not set for each bars.</p>
  
  <p>Other similar topics on stackoverflow says to do like this:</p>
  
  <pre><code>myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
  myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
  </code></pre>
  
  <p>but I don't have an object of the barchart.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>How do I set the bar color dynamically? I tried:</p>
  
  <pre><code>const colors = [];
  this.vitalValues.forEach(value =&gt; {
    colors.push(value.color);
  });
  
  const barColors: Array&lt;any&gt; = [{
    backgroundColor: colors
  }];
  
  this.barChartColors = barColors;
  </code></pre>
  
  <p>but no effect..</p>