Chartjs-Set different color for each bars using ChartJS in Angular 4

TRY using the following …

In your HTML, add [colors] directive …

<div>
  <div style="display: block">
    <canvas class="dashboard-tile-chart" baseChart
            [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [colors]="barChartColors"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
  </div>
</div>

then, in your component.ts , add …

public barChartColors:Array<any> = [{
   backgroundColor: ['red', 'yellow', 'green', 'orange']
}];

_{not an ‘Angular 4’ pro but AFAIK this should work}