Oliver Watkins Oliver Watkins - 1 month ago 26
AngularJS Question

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

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?

Answer

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