ChartJS – Override Attributes (AngularJS)

  angularjs, chart.js, charts, javascript

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/

Source: AngularJS Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.