skp says:
chart-colours="qualityData.colours"
Change above with
chart-colors="qualityData.colours"
Instead of chart-colors use chart-colors.
Check this example. Now please take its reference and correct your code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Chart Color AngularJS</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css" />
<script type="text/javascript">
var app = angular.module("MyApp", ["chart.js"]);
app.controller("MyController", function ($scope) {
$scope.qualityData = {
"data": [100, 75],
"labels": ["Quality", "Difference"],
"colours": ["#158c37", "#ffce56"],
"options": {
elements: {
center: {
text: $scope.quality + '%',
color: '#000000',
fontStyle: 'Arial',
sidePadding: 20
}
}, tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return data.labels[tooltipItem.index] + ' : ' +
data.datasets[0].data[tooltipItem.index] + '%';
}
}
}
}
};
});
</script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<div class="table-responsive">
<table class="table">
<tr>
<canvas id="doughnut" class="chart chart-doughnut" chart-data="qualityData.data"
chart-labels="qualityData.labels" width="200" chart-colors="qualityData.colours"
chart-options="qualityData.options"></canvas>
</tr>
</table>
</div>
</body>
</html>
Demo
