[Chartjs]-How to add gradient background to Line Chart [vue-chart.js]

by

5👍

✅

You should be able to add ref="chart" to your canvas. After that you can declare the new variable that will store the background color.

Like this:

var gradientFill = this.$refs.chart.createLinearGradient(500, 0, 100, 0);
gradientFill.addColorStop(0, "rgba(128, 182, 244, 0.6)");
gradientFill.addColorStop(1, "rgba(244, 144, 128, 0.6)");

Then you should be able to use backgroundColor: gradientFill in your chart options.

Please put this code in created or mounted methods in Vue lifecycle as needed to make sure it renders properly when component displays.

That should be it.

Yo can try and play with it here: https://codepen.io/plavookac/pen/RKjNEV

I hope this helps.

Let me know if you have any questions.

Leave a comment