From 74e66f45ef1fe32640592453ac01cc176303306c Mon Sep 17 00:00:00 2001
From: Bill Hunt <bill@krues8dr.com>
Date: Mon, 13 May 2019 10:12:49 -0400
Subject: [PATCH] Draw labels on top of lines. Fixes  #94.

---
 src/annotation.js | 16 +++++++++++-----
 src/types/box.js  |  3 +++
 src/types/line.js | 23 +++++++++++++++++++++++
 3 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/annotation.js b/src/annotation.js
index 763962f0d..c3a1cf9af 100644
--- a/src/annotation.js
+++ b/src/annotation.js
@@ -21,14 +21,20 @@ 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.configure();
+				element.transition(easingDecimal).drawLabel();
+			});
 		};
 	}
 
diff --git a/src/types/box.js b/src/types/box.js
index 624033b7c..e921d9855 100644
--- a/src/types/box.js
+++ b/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.
 		}
 	});
 
diff --git a/src/types/line.js b/src/types/line.js
index 566652ecb..1a8568d31 100644
--- a/src/types/line.js
+++ b/src/types/line.js
@@ -243,6 +243,29 @@ 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;
+			}
+
+			// 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);