How to change colours for Angular-Chart.js

angularjs, bar-chart, chart.js, charts, javascript

Solution

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.

Problem

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?

Original source

Related problems