How to change colours for Angular-Chart.js

Question

I use Angular-Chart.js (the AngularJS Chart.js version) to create a bar chart. The Chart is working with the options except for the colours.

Even if I set them it is indicated in the documentation, they stay grey.

<div class="graph-display" ng-controller="chartController">
    <canvas class="chart chart-bar"
    data="bilans.data"
    labels="bilans.labels"
    series="bilans.series"
    options="{
        scaleShowHorizontalLines: true,
        scaleShowVerticalLines: false,
        tooltipTemplate: '<%= value %> $',
        responsive: true
    }"
    colours="{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
    }"
    ></canvas>
</div>

Actually, the options are working but the colours are not. Am I doing something wrong?

Answer 1

Your should declare colours object as an array

"colours": [{
    fillColor: 'rgba(47, 132, 71, 0.8)',
    strokeColor: 'rgba(47, 132, 71, 0.8)',
    highlightFill: 'rgba(47, 132, 71, 0.8)',
    highlightStroke: 'rgba(47, 132, 71, 0.8)'
}];

Working Plunkr

For more info refer this post / this too.

---

For newer versions, see eli0tt's answer, as the parameter names have changed.

Answer 2

I was having the same difficulty. In the docs it says to use "colors" however once I updated my html to:

chart-colours

with an angular array of:

$scope.colours = ['#72C02C', '#3498DB', '#717984', '#F1C40F'];

It worked!