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?

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?

• javascript
• angularjs
• chart.js

• Where are you setting your chart defaults? Can we see that code? – Brant Commented Nov 16, 2015 at 12:59
• You don't need to watch colors or colours array. So, it should declare the color array outside of the watcherFunction. – Shaohao Commented Nov 16, 2015 at 14:40

2 Answers 2

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

For version 1.x There are two ways either object instances or simple RGBA values as string:

colors = ["rgba(159,204,0,0.5)","rgba(250,109,33,0.7)","rgba(154,154,154,0.5)"];

colors = [
        {
            backgroundColor: "rgba(159,204,0, 0.2)",
            pointBackgroundColor: "rgba(159,204,0, 1)",
            pointHoverBackgroundColor: "rgba(159,204,0, 0.8)",
            borderColor: "rgba(159,204,0, 1)",
            pointBorderColor: '#fff',
            pointHoverBorderColor: "rgba(159,204,0, 1)"
        },"rgba(250,109,33,0.5)","#9a9a9a","rgb(233,177,69)"
    ];

View:

      <canvas id="doughnut"
              class="chart chart-doughnut"
              chart-data="$ctrl.piChartData"
              chart-labels="$ctrl.labels"
              chart-options="$ctrl.options"
              chart-colors="$ctrl.colors"
      >
      </canvas>

That's worked for me as mentioned in their docs.

Docs Link