[Chartjs]-Using gradient colors in angular-chart.js

by

8👍

✅

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>

Leave a comment