Add shadow for row in vue chartjs

Question

I want to add a shadow for a line in my chart.

My code is like

   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 this code, I was able to add a shadow to the string. However, the grids for the added blue shadow are also undesirable. There should be no shadow in the grids.

Screenshot of shadow on grids and lines. Pay attention to the bluish tint along the grid line? I want to get rid of him.

What can 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.extendto 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(), the method remains overridden also for drawing grid lines.

(non vue.js): https://jsfiddle.net/beaver71/aorgfd0z/