Need help: Shadows on line charts

I’m trying to draw line chart with shadows. The only way i found to override ctx.stroke method and add shadow properties to it, but in this case shadow appears also on gridlines and points.

Example: https://jsfiddle.net/1geu4zd5/2/

I tried to implement shadows by extending line element

const ShadowLineElement = Chart.elements.Line.extend({
  draw () {
    Chart.elements.Line.prototype.draw.apply(this, arguments)

    const { ctx } = this._chart

    const originalStroke = ctx.stroke

    ctx.stroke = function () {
      ctx.save()
      ctx.shadowColor = 'red'
      ctx.shadowBlur = 0
      ctx.shadowOffsetX = 0
      ctx.shadowOffsetY = 8
      originalStroke.apply(this, arguments)
      ctx.restore()
    }
  }
})

Is there any way to draw shadow only for lines?

Author: Fantashit

1 thought on “Need help: Shadows on line charts

Comments are closed.