Question

I have simple chartjs in angularjs, and I would like override a few options like borderWidth, backgroundColor and so on ...

I've tried ...

HTML

`<div ng-app="chartDemo" ng-controller="MainController as mainCtrl">
      <canvas id="doughnut" class="chart chart-doughnut"
        chart-data="mainCtrl.data" chart-labels="mainCtrl.labels" chart-options="mainCtrl.options" chart-dataset-override="mainCtrl.datasetOverride">
      </canvas>
</div>`

JS

`angular.module('chartDemo', ['chart.js'])
    .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
      //animation: false,
      //responsive: false
    });
  }])
    .controller('MainController', MainController);

function MainController($scope, $timeout) {
  var chart = this;

  chart.labels = ["Stack", "Over", "Flow"];
  chart.data = [10, 30, 70];
  chart.options = {
    legend: {
      display: true,
      position: 'bottom'
    },
    cutoutPercentage: 60,
    tooltipEvents: [],
    tooltipCaretSize: 0,
    showTooltips: true,
    onAnimationComplete: function() {
      self.showTooltip(self.segments, true);
    }
  }

/*   chart.datasetOverride = [{borderWidth: 2 }, {borderWidth: 5 },{borderWidth: 10 } ]; */


 /*  chart.datasetOverride = [{hoverBackgroundColor: '#ff6384' }, {hoverBackgroundColor: '#45b7cd' },{hoverBackgroundColor: '#ff8e72' } ]; */


  chart.datasetOverride = [{backgroundColor: '#ccc' }, {backgroundColor: '#ddd' },{backgroundColor: '#fff' } ];



}

MainController.$inject = ['$scope', '$timeout'];`

I've tried look everywhere in their documentation (https://jtblin.github.io/angular-chart.js/), but see nothing to do that.

Any sugesstion for me to get that working ?

Fiddle

https://jsfiddle.net/bheng/csupfywt/

Answer

For anyone still looking for how to override default chart colors:

Under ChartJsProvider.setOptions, simply add

chartColors: ['#000', '#0000ff', '#ee82ee']

Note: Be mindful of what color types you use e.g (HEX or RGBA), this option only works for HEX colors

See below for reference:

`angular.module('chartDemo', ['chart.js'])
    .config(['ChartJsProvider', function (ChartJsProvider) {
    // Configure all charts
    ChartJsProvider.setOptions({
    chartColors: ['#000', '#0000ff', '#ee82ee'],
      //animation: false,
      //responsive: false
    });
  }])
    .controller('MainController', MainController);`

For a working Fiddle example, see here

For further reading, check out angular-chart.js documentation here

This answer was originally posted on Stack Overflow. You can find the full discussion here