So while looking at some code samples for Chart.js I came across the following JSFiddle ( http://jsfiddle.net/dbyze2ga/14/
).
When I coped it over to my IDE (brack
2.0 changes are explained in documentation:
var myLineExtend = Chart.controllers.line.prototype.draw;
var ctx = document.getElementById("LineWithLine").getContext("2d");
var config = {
type: 'line',
data: {
labels: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
datasets: [{
data: [12, 3, 2, 1, 8, 8, 2, 2, 3, 5, 7, 1]
}],
datasetFill : false,
lineAtIndex: 2
}
};
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function () {
myLineExtend.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.top + 24);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.bottom);
ctx.stroke();
ctx.restore();
ctx.textAlign = 'center';
ctx.fillText("TODAY", xaxis.getPixelForValue(undefined, index), yaxis.top + 12);
}
});
new Chart(ctx, config);
<script src="https://github.com/chartjs/Chart.js/releases/download/v2.6.0/Chart.bundle.min.js"></script>
<canvas id="LineWithLine"></canvas>