Chartjs-Gradient effect with Chart.js and Angular

by

0👍

✅

Note: This is how I do it without ng2-charts,

I create the Chart as explained on the charts.js documentation :

 this.chart =  new Chart(
        "canvas",
        {...
        }

And then, after that, I add the gradient

const ctx = this.chart.ctx;
const height = this.chart.height;
const gradient = ctx.createLinearGradient(0, 0, 0, height);
gradient.addColorStop(1, "rgba(128, 182, 244, 0.6)");
gradient.addColorStop(0, "rgba(255, 255, 255, 0.6)");
this.chart.data.datasets[0].backgroundColor = gradient;

Leave a comment