Angular Chart - Changing the Colours of the Chart

Question

Currently I am using Angular Chart API for generating the graphs

Angular Chart

Here I have used below options to have the colors in graph But its not working as expected can you help, What is wrong here(I have attached Image as well)

I wanted to get different color for each section of PieChart

Controller

app.controller('PieCtrl', function($scope, myservice) {
  $scope.$on('values', function(event, data) {
    $scope.releasename = data.b;
    console.log(data);
    $scope.colors=['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360'];
    $scope.labels = data.b;
    $scope.series = ['My Series'];
    $scope.data = [
      data.c
    ];
  });
});

Canvas HTML

<div ng-controller="PieCtrl" class="col-md-3">
<canvas id="data" class="chart chart-pie" width="500px" height="200px" chart-data="data" chart-labels="labels" chart-colors="colors">
        chart-series="series"
</canvas>
</div>

Actual Graph As

Expected Graph As

Answer 1

You can use the datasetOverride property, to set different colors for your pie chart.

HTML

<div ng-controller="PieCtrl" class="col-md-3">
<canvas id="data" class="chart chart-pie" width="500px" height="200px" chart-data="data" chart-labels="labels" chart-dataset-override="datasetOverride">
        chart-series="series"
</canvas>
</div>

Controller

app.controller('PieCtrl', function($scope, myservice) {
   $scope.$on('values', function(event, data) {
      $scope.releasename = data.b;
      $scope.labels = data.b;
      $scope.series = ['My Series'];
      $scope.data = [
         data.c
      ];
      $scope.datasetOverride = [{
         backgroundColor: ['#803690', '#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']
      }];
   });
});