Угловая диаграмма цвет не меняется

Я создаю несколько диаграмм для моего простого приложения.Угловая диаграмма цвет не меняется

Хотя диаграмма создана, но цвета не применяются к ней. Даже у меня есть чек по умолчанию один, они также не применяются к нему.

Но странно, что другой график на одной странице имеет цвета.

эта диаграмма холст

<canvas id="bar" class="chart chart-bar" chart-options="options" 
         chart-data="data" chart-labels="labels" 
         chart-colours="colours" height="100px"> </canvas>

Это его контроллер

app.controller("charByMonth", function ($scope,$http) { 

$scope.totalAmount=0; 
    $scope.labels = []; 
    $scope.series = ['Amount']; 
    $scope.data = []; 
    $scope.colours = ['#803690','#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']; 
    $scope.options = { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    }; 

    $scope.showCustomizedChart = function(){ 

     $scope.labels=[]; 
     $scope.data = []; 

     $http.get('http://localhost:8080/getAmountByMonth/'+$scope.selectedYear+'/'+$scope.selectedStartMonth+'/'+$scope.selectedEndMonth) 
     .then(function(response){ 
      for(var i=$scope.selectedStartMonth;i<=$scope.selectedEndMonth;i++){ 
       switch(i){ 
       case 1: 
        $scope.labels.push("JAN"); 
        break; 
       case 2: 
        $scope.labels.push("FEB"); 
        break; 
       case 3: 
        $scope.labels.push("MAR"); 
        break; 
       case 4: 
        $scope.labels.push("APR"); 
        break; 
       case 5: 
        $scope.labels.push("MAY"); 
        break; 
       case 6: 
        $scope.labels.push("JUN"); 
        break; 
       case 7: 
        $scope.labels.push("JUL"); 
        break; 
       case 8: 
        $scope.labels.push("AUG"); 
        break; 
       case 9: 
        $scope.labels.push("SEP"); 
        break; 
       case 10: 
        $scope.labels.push("OCT"); 
        break; 
       case 11: 
        $scope.labels.push("NOV"); 
        break; 
       case 12: 
        $scope.labels.push("DEC"); 
        break; 
       } 
      } 

      $scope.data.push(response.data); 
      console.log($scope.data); 
     }); 
    } 

});

Это диаграмма я получить

Хотя в той же странице до этого графика я создавая еще один график, и этот график является красочным

это образ этой диаграммы

и это его контроллер

app.controller("BarCtrl", function ($scope,$http) { 
    $scope.totalAmount=0; 
    $scope.labels = []; 
    $scope.series = ['Amount']; 
    $scope.colours = ['#803690','#00ADF9', '#DCDCDC', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360']; 
    $scope.data = []; 
    $scope.options = { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    }; 

    getYearsData = function(){ 
     $http.get('http://localhost:8080/getAmountByYear').then(function(response){ 
      var wholedata = response.data; 
      angular.forEach(wholedata,function(value,key){ 
      $scope.totalAmount = value.totalAmount; 
      console.log($scope.totalAmount); 
      var checkSize = value.years.length; 
      if($scope.labels.length !== checkSize){ 
       for(var i=0;i<checkSize;i++){ 
        $scope.labels.push(value.years[i].toString()); 
       } 
       console.log($scope.labels); 
      } 

      var checkSizeAmount = value.amount.length; 
      if($scope.data.length !== checkSizeAmount){ 
       for(var i=0;i<checkSizeAmount;i++){ 
        $scope.data.push(value.amount[i]); 
       } 

       console.log($scope.data); 
      } 

      }); 
     }); 
    } 


    getYearsData(); 
});

Моя Вторая проблема заключается в том, что диаграмма заполнит неправильно из данных.

Это данные