To get this to work with a reactive chart do this

import { Line, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins
export default {
extends: Line,
mixins: [reactiveProp],
props: ["options"],
watch: {
chartData: {
handler: function() {
this.$data._chart.config.data.datasets[0].backgroundColor = this.gradient;
this.$data._chart.update();
},
}
},
data() {
return {
gradient: {}
};
},
mounted() {
this.gradient = this.$refs.canvas
.getContext("2d")
.createLinearGradient(0, 0, 0, 450);
this.gradient.addColorStop(0, this.color(0.5));
this.gradient.addColorStop(0.5, this.color(0.25));
this.gradient.addColorStop(1, this.color(0));
this.chartData.datasets[0].backgroundColor = this.gradient;
//TODO add gradient to data.
// this.chartData is created in the mixin.
// If you want to pass options please create a local options object
this.renderChart(this.chartData, this.options);
},
methods: {
color(alpha) {
return `rgba(0, 216, 255, ${alpha})`;
}
}
};