title: Changing the color of Pie Charts in Angular 4
body: <p>I want to change the  default color of Pie Charts in Angular 4. My code is so long but this the structure that i have followed but is not working.</p>
  
  <p>.ts file: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// .ts file
  
  export class InfoComponent implements OnInit {
      pieChartLabels: string[];
      pieChartData: number[];
      pieChartType: string = 'pie';
      pieChartLegend: boolean = false;
      pieChartColors: any[];
  }
  
  ngOnInit() {
      this.pieChartLabels = ['label 1','label 2', 'label 3', 'label 4', ...];
      this.pieChartData = [data 1, data 2, data 3, .... ];
      this.pieChartColors =
          [
              {backgroundColor:"#F42A0A",borderColor: "rgba(148,159,177,1)" },
              {backgroundColor:"#95382A",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bbzd",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bbad",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bb0d",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bb1d",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bb6d",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bb7d",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bb8d",borderColor: "rgba(148,159,177,1)"},
              {backgroundColor:"#97bb9d",borderColor: "rgba(148,159,177,1)"}
          ];
      
      
  // .html file
  
  
  &lt;canvas style="margin-top: 10px; margin-bottom: 10px;" baseChart [data]="pieChartData"
                          [labels]="pieChartLabels" [chartType]="pieChartType"
                          [legend]="pieChartLegend" [colors]="pieChartColors"&gt;
  &lt;/canvas&gt;
  
  
  
  
  
  
      
      
      </code></pre>
  </div>
  </div>
  </p>