title: using gradient colors in angular-chart.js
body: <p>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 </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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'
    }];
    
    
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="chart-container" &gt;
      &lt;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" &gt;
     &lt;/canvas&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can declare gradient so it works ? i have tried this</p>
  
  <pre><code>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)');
  </code></pre>
  
  <p>but it doesn't work either.</p>