JavaScript
var data = {
labels: ["-2h", "-10m", "-7m", "-2m", "-5s"],
datasets: [{
data: [12.5, 3.1, 2.3, 1.2, 8.5],
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: [12.5, 4.1, 3.3, 4.2, 15.5],
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)",
},
]
};
var ctx = document.getElementById("LineWithLine").getContext("2d");
Chart.types.Line.extend({
name: "LineWithLine",
draw: function () {
var scale = this.scale;
var self = this;
var points = this.options.lineAtIndex
Chart.types.Line.prototype.draw.apply(this, arguments);
points.forEach(function (point) {
var point = self.datasets[0].points[point];
// draw line
self.chart.ctx.beginPath();
self.chart.ctx.moveTo(point.x, scale.startPoint + 20);
self.chart.ctx.strokeStyle = '#ff0000';
self.chart.ctx.lineTo(point.x, scale.endPoint);
self.chart.ctx.stroke();
// write TODAY
self.chart.ctx.textAlign = 'center';
self.chart.ctx.fillText("Event", point.x, scale.startPoint + 12);
});
}
});
var options = {
// tooltipTemplate: "<%= value %>",
showTooltips: true,
onAnimationComplete: function () {
var ctx = document.getElementById("LineWithLine").getContext("2d");
ctx.font = '.8rem "Gotham Book",sans-serif';
ctx.fontWeight = 'bold';
ctx.fillStyle = '#000';
ctx.textAlign="right";
var self =...