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

Answer 1

As at 2017 I got angular-charts to work with the following code.

1. that the names of the elements are changed. Taken from the angular-chart source code.

2. 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.

3. 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)
  };
}