How I did this
Chart.elements.Line.prototype.draw = function () { // Chart.elements.Line.prototype.draw.apply(this, arguments); var scale = this.scale // draw linesasd this._chart.ctx.save(); this._chart.ctx.strokeStyle = '#ff0000'; var points = this._chart.getDatasetMeta(1).data; // debugger; var point_x = points[0]._model.x; var point_y = points[0]._model.y; for(var point of points){ ctx.strokeStyle="#FF0000"; this._chart.ctx.beginPath(); this._chart.ctx.lineWidth = 3; this._chart.ctx.moveTo(point_x, point_y); this._chart.ctx.lineTo(point._model.x, point._model.y); console.log(point._model.x); point_x = point._model.x; point_y = point._model.y; this._chart.ctx.stroke(); } this._chart.ctx.restore(); } var data = { labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.2)", strokeColor: "rgba(220,220,220,1)", pointColor: "rgba(220,220,220,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [28, 48, null, null, null, null, null, null, null] }, { label: "My Second dataset", fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [null, null, 40, 19, 86, 27, 90, null, null] }, { label: "My Third dataset", fillColor: "rgba(151,205,187,0.2)", strokeColor: "rgba(151,205,187,1)", pointColor: "rgba(151,205,187,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,205,187,1)", data: [null, null, null, null, null, null, null, 24, 32] } ] }; var ctx = document.getElementById('chart').getContext('2d'); // Chart.elements.Line.prototype.draw = function() { // // alert('asd') // } var myLineChart = new Chart(ctx, { type: 'line', data: data });