How can I use gradient as fillColor in Line Chart

[saqueib]

Hi Guys, I need to use gradient as fill color, here is what I found jsbin (http://jsbin.com/mexizubova/edit?html,output), but how can I use it with directive.

<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" 
    chart-legend="true" chart-series="series" chart-click="onClick"></canvas> 

[jtblin]

You can pass the colour object to the chart-colours attribute.

[{ // blue
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,0.8)"
}]

[saqueib]

@jtblin I have tried your solution but it not working. below is the snippet

Here is jsbin, please help what i missed

<canvas 
      id="line" 
      class="chart chart-line" 
      data="data"
      labels="labels" 
      legend="true" 
      series="series"
      click="onClick" 
      chart-colours='[{fillColor: "rgba(151,187,205,0.2)",strokeColor: "rgba(151,187,205,1)",pointColor: "rgba(151,187,205,1)",pointStrokeColor: "#fff",pointHighlightFill: "#fff",pointHighlightStroke: "rgba(151,187,205,0.8)"}]'
    >
    </canvas>

[jtblin]

You need to set it not in the markup scope.colours = [{ // blue fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,0.8)" }]

then in the markup chart-colours=colours.

[saqueib]

@jtblin Hi I tried it, but its not working, here is jsbin http://jsbin.com/qimepepeso/edit?html,js,output
If you can update jsbin code to make it work will be very helpful.

[shyamal890]

@jtblin I tried applying gradient fill in one of the dataset however, it doesn't work. Here is the PLUNKER

Ref: Stackoverflow Question

[saqueib]

@shyamal890, unfortunately @jtblin solutions doesn't work, so I had to create my own directive to solve this, here is code for same. its not flexible but you can customise it.

// Line Chart
.directive('lineChart', function($timeout){
  return {
    restrict : 'EA',
    scope : {
      data : '=',
      height : '=',
      ctx : '='
    },
    link : function ( scope, elem, attr ) {
      scope.height = scope.height || 260;
      scope.data = scope.data || {};

      // Check for chart.js 
      if(! window.Chart) { throw new Error("Chart.js is required");}

      // Init chart
      scope.ctx = elem[0].getContext("2d");

      // Gradient color
      var gradient = scope.ctx.createLinearGradient(0, 0, 0, 400);
          gradient.addColorStop(0, 'rgba(243, 103, 101,0.5)');   
          gradient.addColorStop(1, 'rgba(0, 89, 179,0.5)');

      var lineChartData = {
        labels : scope.data.labels,
        datasets : [
            {
                fillColor : gradient,
                pointColor : "rgba(255,255,255,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                data : scope.data.values
            }
        ]
      };


      // Options 
      var options = {
          scaleBeginAtZero: true, 
          scaleShowLabels: false, 
          responsive : true, 
          tooltipFontSize: 12,
          showTooltips : true, 
          tooltipFillColor: "rgba(0,0,0,0.2)",
          scaleGridLineColor : "rgba(255,255,255,.04)", 
          tooltipEvents: [],
          onAnimationComplete: function () {
            // to always show tooltip 
            this.showTooltip(this.datasets[0].points, true);
          } 
      };

      var chart = new Chart(scope.ctx).Line(lineChartData, options);  

      // Watch for data change 
      scope.$watch('data', resetChart, true);

      function resetChart(newVal, oldVal) {
          if (chart) chart.destroy();

          // Assign the data
          lineChartData.labels = newVal.labels;
          lineChartData.datasets[0].data = newVal.values;

          $timeout(function () {
            chart = new Chart(scope.ctx).Line(lineChartData, options);
          }, 30);
      }

      scope.$on('$destroy', function () {
            if (chart) chart.destroy();
      });
    }
  };
})

activity.graph =  { labels : [..., ...], values : [ ..., ... ] };

<canvas line-chart 
  data="activity.graph" 
  height="260"
>

[shyamal890]

@saqueib This solution completely bypasses angular-chart. I hope @jtblin will add this feature

[saqueib]

@shyamal890 that what i said, I had to create my own directive, I hope @jtblin does add this feature in angular-chart directive

[AsmaeF]

@saqueib i am using angular-chart.js and i want to use the gradient, i have tried your directive but i get this error : TypeError: (intermediate value).Line is not a function due to this line in the directive chart = new Chart(scope.ctx).Line(lineChartData, options);
i have tried to use gradient for my code, this way (look at the code in REF) but fillColor dosen't seem to take in count gradient.

REF :http://stackoverflow.com/questions/38762419/using-gradient-colors-in-angular-chart-js