add shadow for line in vue chartjs

问题

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)

回答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/

来源：https://stackoverflow.com/questions/49191402/add-shadow-for-line-in-vue-chartjs

标签

chart.js

vue-chartjs