score:6

you can customize various things with a chart js library (docs).

to add shadows to chart lines you can use chart.controllers.line and create a function to draw the shadow.

example for shadows:

let draw = chart.controllers.line.prototype.draw;
chart.controllers.line = chart.controllers.line.extend({
    draw: function() {
        draw.apply(this, arguments);
        let ctx = this.chart.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function() {
            ctx.save();
            ctx.shadowcolor = '#000000';
            ctx.shadowblur = 10;
            ctx.shadowoffsetx = 0;
            ctx.shadowoffsety = 4;
            _stroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

and to create vertical lines you can use chart.defaults.linewithline and create a function to draw the vertical line too.

example:

chart.defaults.linewithline = chart.defaults.line;
chart.controllers.linewithline = chart.controllers.line.extend({
   draw: function(ease) {
      chart.controllers.line.prototype.draw.call(this, ease);

      if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
         var activepoint = this.chart.tooltip._active[0],
             ctx = this.chart.ctx,
             x = activepoint.tooltipposition().x,
             topy = this.chart.scales['y-axis-0'].top,
             bottomy = this.chart.scales['y-axis-0'].bottom;

         // draw line
         ctx.save();
         ctx.beginpath();
         ctx.moveto(x, topy);
         ctx.lineto(x, bottomy);
         ctx.linewidth = 2;
         ctx.strokestyle = '#07c';
         ctx.stroke();
         ctx.restore();
      }
   }
});

follow the complete code for your question in my fiddle


Related Query

More Query from same tag