score:16

Accepted answer

yes!

you could accomplish the same stroke shadow effect for line chart with chartjs v2 in the following way ...

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 = '#e56590';
            ctx.shadowblur = 10;
            ctx.shadowoffsetx = 0;
            ctx.shadowoffsety = 4;
            _stroke.apply(this, arguments)
            ctx.restore();
        }
    }
});

let ctx = document.getelementbyid("canvas").getcontext('2d');
let mychart = new chart(ctx, {
    type: 'line',
    data: {
        labels: ["january", "february", "march", "april", "may", "june", "july"],
        datasets: [{
            label: "my first dataset",
            data: [65, 59, 80, 81, 56, 55, 40],
            bordercolor: '#ffb88c',
            pointbackgroundcolor: "#fff",
            pointbordercolor: "#ffb88c",
            pointhoverbackgroundcolor: "#ffb88c",
            pointhoverbordercolor: "#fff",
            pointradius: 4,
            pointhoverradius: 4,
            fill: false
        }]
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.5.0/chart.min.js"></script>
<canvas id="canvas" width="600" height="300" style="background-color:#fff"></canvas>

score:1

the proper answer is given on this issue at the github page for chart.js by etimberg and ashot-kr.

see this fiddle for the work in action, the red line is the shadow.

adopted from the fiddle, giving a proper shadow, include this code:

(function()
{
    var shadowlineelement = chart.elements.line.extend({
        draw: function()
        {
            var ctx = this._chart.ctx;
            var originalstroke = ctx.stroke;
            ctx.stroke = function()
            {
                ctx.save();
                ctx.shadowcolor = 'rgba(0,0,0,0.4)';
                ctx.shadowblur = 2;
                ctx.shadowoffsetx = 0.5;
                ctx.shadowoffsety = 0.5;
                originalstroke.apply(this, arguments);
                ctx.restore();
            };
            chart.elements.line.prototype.draw.apply(this, arguments);
            ctx.stroke = originalstroke;
        }
    });
    chart.defaults.shadowline = chart.defaults.line;
    chart.controllers.shadowline = chart.controllers.line.extend({
        datasetelementtype: shadowlineelement
    });
})();

and then change the dataset type from type: 'line' to type: 'shadowline'.


Related Query

More Query from same tag