up vote 1 down vote favorite
1

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.

share|improve this question
up vote 3 down vote accepted

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.