Chartjs v2 stroke shadow
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'.
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>