Chartjs-Add shadow for line in vue chartjs

by

3👍

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/

0👍

      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

Leave a comment