chartjs 2+ how to specify bar chart colouring

Question

I'm trying to colour my bar chart using the following libraries although I'm failing to get this working and the colours are always random. The data works fine. I've included what versions and the order which they are loaded below. Hope this helps.

Any help much appreciated.

Many thanks,

Code snippet

<script src="js/chartjs/Chart.js" defer></script>
<script src="js/angular-chart/angular-chart.min.js" defer></script>

Library versioning

• AngularJS v1.5.0-rc.2
• Chart.js Version: 2.3.0
• angular-chart.js Version: 1.1.1

HTML markup

<canvas id="line" class="chart chart-bar" chart-color="backgroundColour: 'Red'" chart-data="vm.chartData.data" chart-labels="vm.chartData.legends" chart-series="vm.series" chart-options="vm.options" chart-dataset-override="vm.datasetOverride" chart-click="vm.onClick"></canvas>

The final solution notes

The final working solution sets the colours in the controller using Angular 1.5.8

Answer 1

You can specify colors in your controller:

...
$scope.vm.colors = [ '#f7464a', '#949FB1'];
...

and later on use in your chart:

<canvas id="line" class="chart chart-bar" chart-colors="vm.colors" chart-data="vm.chartData.data" chart-labels="vm.chartData.legends" chart-series="vm.series" chart-options="vm.options" chart-dataset-override="vm.datasetOverride" chart-click="vm.onClick"></canvas>

Small demo

UPDATE:

To set global colors you can either set Chart.defaults.global.colors or use ChartJsProvider and set colors in .config() as follows (see documentation):

ChartJsProvider.setOptions({ colors : [ '#803690', '#00ADF9' ] });

Now, the last option I could not get to work, it updates some different Chart object which has no relation to the one being actually used. But the Chart.defaults.global.colors approach works, see updated demo.