Draw labels on top of lines. Fixes #94.

src/annotation.js

@@ -21,14 +21,19 @@ module.exports = function(Chart) {
 		return function(chartInstance, easingDecimal) {
 			var defaultDrawTime = chartInstance.annotation.options.drawTime;
 
-			helpers.elements(chartInstance)
+			var elements = helpers.elements(chartInstance)
 				.filter(function(element) {
 					return drawTime === (element.options.drawTime || defaultDrawTime);
-				})
-				.forEach(function(element) {
-					element.configure();
-					element.transition(easingDecimal).draw();
 				});
+
+			// Draw our box/line first, then the labels, so the labels will be on top.
+			elements.forEach(function(element) {
+				element.configure();
+				element.transition(easingDecimal).draw();
+			});
+			elements.forEach(function(element) {
+				element.transition(easingDecimal).drawLabel();
+			});
 		};
 	}
 

src/types/box.js

@@ -141,6 +141,9 @@ module.exports = function(Chart) {
 			ctx.strokeRect(view.left, view.top, width, height);
 
 			ctx.restore();
+		},
+		drawLabel: function() {
+			// Box doesn't draw labels yet, but we add this for consistency of interfaces.
 		}
 	});
 

src/types/line.js

@@ -243,6 +243,31 @@ module.exports = function(Chart) {
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
 
+			ctx.restore();
+		},
+		drawLabel: function() {
+			var view = this._view;
+			var ctx = this.chartInstance.chart.ctx;
+
+			if (!view.clip) {
+				return;
+			}
+
+			ctx.save();
+
+			// Canvas setup
+			ctx.beginPath();
+			ctx.rect(view.clip.x1, view.clip.y1, view.clip.x2 - view.clip.x1, view.clip.y2 - view.clip.y1);
+			ctx.clip();
+
+			ctx.lineWidth = view.borderWidth;
+			ctx.strokeStyle = view.borderColor;
+
+			if (ctx.setLineDash) {
+				ctx.setLineDash(view.borderDash);
+			}
+			ctx.lineDashOffset = view.borderDashOffset;
+
 			if (view.labelEnabled && view.labelContent) {
 				ctx.beginPath();
 				ctx.rect(view.clip.x1, view.clip.y1, view.clip.x2 - view.clip.x1, view.clip.y2 - view.clip.y1);