using gradient colors in angular-chart.js

Question

i am trying to use gradient for my charts with angularjs1 using angular-chart.js version 1.0.0 but it seems that fillcolor does not recognize gradient here is my code down below

var app = angular.module('starter', ['ionic', 'ngCordova',   'chart.js',  'ionic-modal-select']).controller('graphCtrl', function($scope) {
  

 var ctx =  document.getElementById('base2').getContext('2d');
  
 var gradient =ctx.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
    gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
  
$scope.labels2 = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
 
 $scope.data2 = [
      [65, -59, 80, 81, -56, 55, -40],
      [28, 48, -40, 19, 86, 27, 90]
  ];
 $scope.type2 = 'bar';
  
  $scope.colors2 = [{
     fillColor: gradient,gradient angular js not responding
     strokeColor: 'rgba(151,187,205,1)',
     pointColor: 'rgba(151,187,205,1)',
     pointStrokeColor: '#fff',
     pointHighlightFill: '#fff',
     pointHighlightStroke: 'rgba(151,187,205,0.8)'
   }, {
     pointDot: false,
     pointDotRadius: 0,
     fillColor: gradient,
     strokeColor: 'rgba(187,155,206,1)',
     pointColor: '#BB9BCE',
    pointStrokeColor: 'rgba(187,155,206,1)',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(187,155,206,1)'
   }];
  
 $scope.datasetOverride2 = [{
      label: "Bar chart",
      borderWidbelowbelowth: 1,
      type: 'bar'
      
  }, {
      label: "Line chart",
      borderWidth: 3,

      hoverBackgroundColor: "rgba(255,99,132,0.4)",
      hoverBorderColor: "rgba(255,99,132,1)",
      type: 'line'
  }];
  
  
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="chart-container" >
    <canvas id="base2" class="chart-base" chart-type="type2" chart-          data="data2" chart-labels="labels2" chart-colours="colors2" chart-      options="options2" chart-dataset-override="datasetOverride2" >
   </canvas>
 </div>

How can declare gradient so it works ? i have tried this

var ctx = angular.element(document).find("canvas")[0].getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');

but it doesn't work either.

Answer 1

I hope this answer would be helpful for those who have the same problem with gradient as me!

So what worked for me is to create an event listner on chart and call my function changeColor when the event chart is emitted.

Here is the code in my controller:

var changeColor = function(chart){
var ctx = chart.chart.ctx;
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');
gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');
chart.chart.config.data.datasets[0].backgroundColor = gradient;};


$scope.$on('chart-create', function (evt, chart) {
if(chart.chart.canvas.id === 'base2') {
  changeColor(chart);
  chart.update();
}

HTML code

<canvas id="base2" class="chart-base" chart-type="type2" chart-data="data2" chart-labels="labels2" chart-colors="colors2" chart-options="options2" >
</canvas>