add shadow for line in vue chartjs - chart.js

Question

I want to add shadow for the line in my chart.
My code is like so
import { Line } from 'vue-chartjs'
import Chart from 'chart.js'
let draw = Chart.controllers.line = Chart.controllers.line.extend({
draw: function() {
let ctx = this.chart.chart.ctx;
ctx.save();
ctx.shadowColor = 'red';
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 5;
ctx.stroke();
draw.apply(this, arguments);
ctx.restore();
}
});
const BasicLineChart = {
extends: Line,
props: ['data', 'options'],
mounted () {
const options = this.options || {
responsive: true,
maintainAspectRatio: false,
borderWidth: 1,
legend: {
display: false
},
scales: {
yAxes: [{
position: 'right',
scaleLabel: {
display: false,
labelString: 'Pris',
fontFamily: 'apercu-light',
},
gridLines: {
display:true,
color: 'rgba(255, 255, 255, 0.6)'
},
ticks: {
beginAtZero:false,
mirror: true
}
}],
xAxes: [{
ticks: {
display: true,
},
scaleLabel: {
display: false,
},
gridLines: {
display:true,
color: 'rgba(255, 255, 255, 0.6)'
}
}]
}
}
this.renderChart(this.data, options)
}
}
export default {
props: ['id'],
components: {
BasicLineChart,
},
created() {
this.draw()
},
data() {
return {
chartData: {},
showChart: false
}
},
methods: {
draw() {
axios.get('url/' + this.id).then(({ data })=> {
this.showChart = true;
})
}
}
};
With that code I was able to add the shadow for line. However the grids for added blue shadow as well, which is not desired behavior. The grids should not have any shadow.
The screen shot of the shadow on grids and line. Notice the slighly blue shade along the grids line? I want to get rid of it
What could be done to get rid of the shadow on the grids ?
UPDATED:
I updated the code as suggested. I got this error
app.js?v=79:76561 Uncaught TypeError: this.chart.getDatasetMeta is not a function
at ChartElement.getMeta (app.js?v=79:76561)
at ChartElement.linkScales (app.js?v=79:76545)
at ChartElement.initialize (app.js?v=79:76535)
at ChartElement.Chart.DatasetController (app.js?v=79:76514)
at ChartElement [as constructor] (app.js?v=79:5711)
at ChartElement [as constructor] (app.js?v=79:5711)
at ChartElement.draw (app.js?v=79:71285)
at Chart.drawDataset (app.js?v=79:76122)
at Chart.drawDatasets (app.js?v=79:76097)
at Chart.draw (app.js?v=79:76061)

Answer 1

Try changing Chart.controllers.line.extend to this:
Chart.controllers.line = Chart.controllers.line.extend({
draw: function() {
let ctx = this.chart.chart.ctx;
ctx.save();
ctx.shadowColor = 'red';
ctx.shadowBlur = 12;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 5;
ctx.stroke();
draw.apply(this, arguments);
ctx.restore();
}
});
to avoid stroke() method stay redefined also for gridlines drawing.
Check this example (non vue.js): https://jsfiddle.net/beaver71/aorgfd0z/

Answer 2

let draw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function () {
let ctx = this.chart.ctx;
ctx.save();
ctx.shadowColor = "rgba(54, 54, 54, 0.2)";
ctx.shadowBlur = 5;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 4;
draw.apply(this, arguments);
ctx.restore();
},
});
Use this way, shadows won't appear on your gridlines, also if you are using annotation line then also it won't give any problem to you.
I have implemented this in Vue.js