How do you set pie chart colors in angular-chart.js

Question

I am playing with the pie chart in angular-charts.js. I have made it so that I can set the data and labels. A watcher function executes whenever something is added or removed from the list of "pie" items.

Labels and data are recognized, but not the color. I have tried a few different spellings.

app.controller("PieCtrl", function ($scope, $timeout, pieItems) {
    $scope.labels = pieItems.labelsItems();
    $scope.data = pieItems.data();


    function watcherFunction(newData) {
        $scope.labels = pieItems.labelsItems(); //just an array of strings. 
        $scope.data = pieItems.data(); //just an array of number values

        $scope.colours = ["rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)"] //not working

        $scope.colors = ["rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)"] //also not working

    }

    $scope.$watch(pieItems.list, watcherFunction, true);
    $scope.$watch(pieItems.getTitle, watcherFunction, true);

});

It seems to generate random colors for the slices. I would like to override this. Surely it must be possible to do this?

Solution

Your JS:

$scope.colours = ["rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)",
            "rgba(224, 108, 112, 1)"]

Your directive Markup:

<canvas id="pie" class="chart chart-pie" chart-colours="colours"></canvas>

The docs say you can override default colors by setting the array :

Chart.defaults.global.colours

Comments

[Oliver Watkins]

unfortunately, that doesn't seem to work for me :( It still generates random colors

[Oliver Watkins]

sorry. yes it does work :) I had some wrong code. Thanks!

[Evan]

in my case, i need to set chart-colors. i'm using version 1.1.1

[M.Abulsoud]

@Evan I have same issue.