47đź‘Ť
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)'
}];
For more info refer this post / this too.
For newer versions, see eli0tt’s answer, as the parameter names have changed.
13đź‘Ť
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!
8đź‘Ť
It seems that naming changed again. I’m using angular-chart.js 1.0.3 and color management for bar charts works like this :
colors:[{
backgroundColor:"#F00",
hoverBackgroundColor:"#FF0",
borderColor:"#0F0",
hoverBorderColor:"#00F"
}];
In the canvas tag, the name of the attribute is chart-colors
7đź‘Ť
As @pankajparkar said. Just adding that you can also pass html colours and angular-chart.js will define the colour objects properly in rgba with the proper nuances e.g. $scope.colors = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
6đź‘Ť
As at 2017 I got angular-charts to work with the following code.
-
that the names of the elements are changed. Taken from the angular-chart source code.
-
also that as soon as you run out of colours angular-chart will generate them for you. This includes an opacity of 0.2 for background colours.
-
If you specify #hex colours opacity will be added.
Colour specification via global.
app.config(['ChartJsProvider', function (ChartJsProvider) {
// Using ChartJsProvider.setOptions('bar', { didn't seem to work for me.
// Nor did $scope.chartColors. Although I only tried that in the controller.
Chart.defaults.global.colors = [
{
backgroundColor: 'rgba(78, 180, 189, 1)',
pointBackgroundColor: 'rgba(78, 180, 189, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}, {
backgroundColor: 'rgba(229, 229, 229, 1)',
pointBackgroundColor: 'rgba(229, 229, 229, 1)',
pointHoverBackgroundColor: 'rgba(151,187,205,1)',
borderColor: 'rgba(0,0,0,0',
pointBorderColor: '#fff',
pointHoverBorderColor: 'rgba(151,187,205,1)'
}
...
In the source code the colour picking code is currently. Colours set via Chart.js options are reset here (I didn’t get this to work).
Pick colours as per angular-chart.js source code:
var colors = angular.copy(scope.chartColors ||
ChartJs.getOptions(type).chartColors ||
Chart.defaults.global.colors
Yes, if you don’t specify an object, opacity is set for you. From angular-chart.js:
function convertColor (color) {
if (typeof color === 'object' && color !== null) return color;
if (typeof color === 'string' && color[0] === '#') return getColor(hexToRgb(color.substr(1)));
return getRandomColor();
}
...
function getColor (color) {
return {
backgroundColor: rgba(color, 0.2),
pointBackgroundColor: rgba(color, 1),
pointHoverBackgroundColor: rgba(color, 0.8),
borderColor: rgba(color, 1),
pointBorderColor: '#fff',
pointHoverBorderColor: rgba(color, 1)
};
}
2đź‘Ť
You wanted to say: “colours”
$scope.colours = ['#FD1F5E','#1EF9A1','#7FFD1F','#68F000'];
Also we can see the other attributes That we can change , like : legend , series, hover . Next to each chart you can see an option called “settings “, that’s all what you can change.
0đź‘Ť
With the latest version $scope.colors does not seem to work. You need to use chart-dataset-override="colors"
DEMO
angular.module("app", ["chart.js"]).controller("DoughnutCtrl", function ($scope) {
$scope.results = {'1': 0, '2': 0, '3': 0, '4': 0, '5': 0, '6': 0, '7': 0, '8': 0, '9': 0, '10': 0};
$scope.labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
$scope.data = [
[1, 3, 5, 8, 9, 10, 11, 12, 33, 5]
];
$scope.colors = [{
fillColor: 'rgba(59, 89, 152,0.2)',
strokeColor: 'rgba(59, 89, 152,1)',
pointColor: 'rgba(59, 89, 152,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(59, 89, 152,0.8)'
}];
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
</head>
<body ng-app="app" ng-controller="DoughnutCtrl">
<canvas
class="chart chart-bar"
chart-data="data"
chart-labels="labels"
chart-dataset-override="colors">
</canvas>
</body>
</html>