Chart.js line chart with shadow

Please check the demo first than I will go through explanations for the line chart with shadow effect.

DEMO

See the Pen Chart.js line chart with shadow by Puneet Sharma (@webdevpuneet) on CodePen.

Explanations:

As you can see there is a drop shadow just beneath and some part below the line chart made with Chart.js. To reproduce this effect we have to create a new chart type just like line with some extra drop shadow effect added to it.

So there is a section in the JS code to do that, sharing code below:

/* start of shdow line chart */
class Custom extends Chart.LineController {
    draw() {
        super.draw(arguments);
        const ctx = this.chart.ctx;
        let _stroke = ctx.stroke;
        ctx.stroke = function(){
            ctx.save();
            ctx.shadowColor = 'rgba(0,0,0,0.2)';
            ctx.shadowBlur = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 5;
            _stroke.apply(this, arguments);
            ctx.restore();
        }
    }
}
Custom.id = 'shadowline';
Custom.defaults = Chart.LineController.defaults;
Chart.register(Custom);
/* end of shdow line chart */

When you add the above code in your script and use “shadowline” in your line chart instead of “line” you will get the shadow effect. You can fork the code on codepen and customize it according to your needs.