2๐
โ
U can customize code before draw it
Working demo : https://jsfiddle.net/4rasm1hc/
let draw = Chart.controllers.line.prototype.draw;
Chart.controllers.line = Chart.controllers.bar.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();
}
}
});
Chart.defaults.LineWithLine = Chart.defaults.bar;
Chart.controllers.LineWithLine = Chart.controllers.bar.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+15,
topY =6000,
width=activePoint._view.width,
bottomY = 0;
console.log(activePoint);
// draw line
ctx.save();
ctx.beginPath();
ctx.moveTo(x, topY);
ctx.lineTo(x+width-10, bottomY+30);
ctx.lineWidth = width*4;
ctx.strokeStyle = '#e5e0e01a';
ctx.stroke();
ctx.restore();
}
}
});
Source:stackexchange.com