Help: Shadows on line charts

[ayushsoni1010]

I'm trying to draw a line chart with shadows. The only way I have found is to override ctx.stroke method and add shadow properties to it, but in this case, the shadow appears also on gridlines , annotation lines , and points.

      let draw = Chart.controllers.line.prototype.draw;
      Chart.helpers.extend(Chart.controllers.line.prototype,{
        draw: function () {
          draw.apply(this, arguments);
          let ctx = this.chart.ctx;
          let _stroke = ctx.stroke;
          ctx.stroke = function () {
            ctx.save();
            ctx.shadowColor = "rgba(39, 127, 254, 1)";
            ctx.shadowBlur = 5;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 4;
            _stroke.apply(this, arguments);
            ctx.restore();
          };
        },
      });

Due to this,

Is there any way to draw shadows only for lines?
Also, I am implementing this chart in Vue.js

[LeeLenaleee]

I guess this behaviour is comming from that you override the canvas stroke function with your own function where you give it a shadow. If you dont do this it works fine: https://jsfiddle.net/Leelenaleee/x7ao5419/5/

class lineWithShadow extends Chart.controllers.line {
  draw() {
    const ctx = this._ctx;
    ctx.shadowColor = "rgba(39, 127, 254, 1)";
    ctx.shadowBlur = 5;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 4;
    super.draw();
  }
}

lineWithShadow.id = 'lineWithShadow';
Chart.register(lineWithShadow);

const options = {
  type: 'lineWithShadow',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      }
    ]
  },
  options: {
    scales: {}
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

[ayushsoni1010]

Thanks for the help! I really appreciate it :)

I tried this way but the shadow didn't render

@LeeLenaleee is there any way without doing by classes

[LeeLenaleee]

Idk, never really dove into the custom chart types. But did you make sure to use the type you created instead of default line because as you can see in my fiddle it works fine

[ayushsoni1010]

I had tried this way, it's working fine

      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();
        },
      });

By using this way, shadows won't appear on gridlines, also if we are using an annotation line then also it won't give any problem. I have implemented this in Vue.js