Would something like this work?

  chart.datasetOverride = [
    {fillColor: '#ccc' }, 
    {strokeColor: '#ddd' },
    {highlightFill: '#fff' } 

Taken from


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


Refer to the source code:

function getChartData (type, scope) {
  var colors = getColors(type, scope);
  return Array.isArray(scope.chartData[0]) ?
    getDataSets(scope.chartLabels, scope.chartData, scope.chartSeries || [], colors, scope.chartDatasetOverride) :
    getData(scope.chartLabels, scope.chartData, colors, scope.chartDatasetOverride);
function getData (labels, data, colors, datasetOverride) {
  var dataset = {
    labels: labels,
    datasets: [{
      data: data,
      backgroundColor: (color) {
        return color.pointBackgroundColor;
      hoverBackgroundColor: (color) {
        return color.backgroundColor;
  if (datasetOverride) {
    angular.merge(dataset.datasets[0], datasetOverride);
  return dataset;

So if your data is just an array of number, datasetOverride should be an object instead of array:

chart.datasetOverride = {
  borderWidth: 10, 
  backgroundColor: ["#f00", "#00f", "#000"],
  hoverBackgroundColor: ["#f0f", "#0ff", "#ff0"]


Note: For colors only, you can pass an array of objects represent color to chart-colors but it's strange that they take pointBackgroundColor as backgroundColor and backgroundColor as hoverBackgroundColor:

chart.colors = [
    backgroundColor: "#0f0",
    pointBackgroundColor: "#000",
    backgroundColor: "#f0f",
    pointBackgroundColor: "#00f",
    backgroundColor: "#ff0",
    pointBackgroundColor: "#f00",


Related Query

More Query from same tag