Chart.js: Need help: Shadows on line charts

[Ashot-KR]

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?

[etimberg]

@Ashot-KR I think you could use a plugin that hooks beforeDatasetsDraw and afterDatasetsDraw and only use a different stroke function there. https://github.com/chartjs/Chart.js/blob/master/src/core/core.controller.js#L569

Extending Line to ShadowLine won't work as the line chart will use the old element. If you did something like the following it might work.

const ShadowLineElement = Chart.elements.Line.extend(...);
Chart.elements.Line = ShadowLineElement;

[Ashot-KR]

Extending Line to ShadowLine won't work as the line chart will use the old element. If you did something like the following it might work

Extending line works(see the fiddle), i also create a new chart type:

Chart.defaults.ShadowLine = Chart.defaults.line
Chart.controllers.ShadowLine = Chart.controllers.line.extend({
  datasetElementType: ShadowLineElement
})

and create a chart with this type

new Chart(document.getElementById('canvas'), {
  type: 'ShadowLine'
  …
}

Didn't notice it here just to be shorter.

I think you could use a plugin that hooks beforeDatasetsDraw and afterDatasetsDraw and only use a different stroke function there.

Thanks, i'll give it a try

[etimberg]

Sorry about that, I missed that part of your fiddle. Trying the plugin hooks and see how they work.

I modified your fiddle a bit to remove the shadow after drawing the line element. https://jsfiddle.net/dces93wv/

[Ashot-KR]

@etimberg you're my savior. Thanks a lot!