ChartJS - Override Attributes (AngularJS)

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/

score 4 · Answer 1 · answered May 07 '21 at 02:39

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: colors.map(function (color) {
        return color.pointBackgroundColor;
      }),
      hoverBackgroundColor: colors.map(function (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"]
};

Fiddle

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",
  },
];

Fiddle

score 1 · Answer 2 · answered May 04 '21 at 22:23

1

Would something like this work?

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

Taken from https://stackoverflow.com/a/28647813/1772933

answered May 04 '21 at 22:23

Kinglish

23,358
3
22
43

Can you please try your answer it base on my fiddle ? – code-8 May 06 '21 at 16:18

Leon Matota · Answer 3 · 2021-05-12T09:37:04.313

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

@cyb3rZ try this and check out the fiddle, hope it helps – Leon Matota May 14 '21 at 13:23 — Leon Matota, May 14 '21 at 13:23

ChartJS - Override Attributes (AngularJS)

HTML

JS

Fiddle

3 Answers3