From 07827d81c8a6d42d9fbd8dbab943c7312ffc6eee Mon Sep 17 00:00:00 2001
From: Adam Pine <apine@PC67827.corporate.gannettfleming.com>
Date: Fri, 8 Jul 2016 14:06:43 -0400
Subject: [PATCH 1/6] adds label option to Line annotation.

---
 Chart.Annotation.js          | 25 ++++++++++++++++++++-----
 Chart.Annotation.min.js      |  2 +-
 samples/horizontal-line.html |  5 +++--
 src/box.js                   |  3 ++-
 src/chart.annotation.js      |  6 ++++--
 src/line.js                  | 16 ++++++++++++++--
 6 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/Chart.Annotation.js b/Chart.Annotation.js
index 54825850b..11e4cbb36 100644
--- a/Chart.Annotation.js
+++ b/Chart.Annotation.js
@@ -13,8 +13,9 @@
 // Box Annotation implementation
 module.exports = function(Chart) {
 	var BoxAnnotation = Chart.Element.extend({
-		draw: function(ctx) {
+		draw: function(chartInstance, options) {
 			var view = this._view;
+            var ctx = chartInstance.chart.ctx;
 
 			// Canvas setup
 			ctx.lineWidth = view.borderWidth;
@@ -151,11 +152,13 @@ var AnnotationPlugin = Chart.PluginBase.extend({
 	afterDraw: function(chartInstance, easingDecimal) {
 		// If we have annotations, draw them
 		var annotationObjects = chartInstance._annotationObjects;
+        var annotationOpts = chartInstance.options.annotation;
+
 		if (isArray(annotationObjects)) {
 			var ctx = chartInstance.chart.ctx;
-
 			annotationObjects.forEach(function(obj) {
-				obj.transition(easingDecimal).draw(ctx);
+                var opts = annotationOpts.annotations[obj._index];
+				obj.transition(easingDecimal).draw(chartInstance, opts);
 			});
 		}
 	}
@@ -172,9 +175,12 @@ module.exports = function(Chart) {
 
 	var LineAnnotation = Chart.Element.extend({
 
-		draw: function(ctx) {
+		draw: function(chartInstance, options) {
 			var view = this._view;
-
+            var ctx = chartInstance.chart.ctx;
+            var scale = chartInstance.scales[options.scaleID];
+            var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
+            var chartArea = chartInstance.chartArea;
 			// Canvas setup
 			ctx.lineWidth = view.borderWidth;
 			ctx.strokeStyle = view.borderColor;
@@ -184,10 +190,16 @@ module.exports = function(Chart) {
 			ctx.moveTo(view.x1, view.y1);
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
+            
+            ctx.fillText(options.label ? options.label : 'test', chartArea.left, pixel+5);
+
+            console.info(ctx);
+
 		}
 	});
 
 	function lineUpdate(obj, options, chartInstance) {
+        console.info(chartInstance.chart.ctx);
 		var model = obj._model = obj._model || {};
 
 		var scale = chartInstance.scales[options.scaleID];
@@ -199,15 +211,18 @@ module.exports = function(Chart) {
 				model.x1 = chartArea.left;
 				model.x2 = chartArea.right;
 				model.y1 = model.y2 = pixel;
+
 			} else {
 				model.y1 = chartArea.top;
 				model.y2 = chartArea.bottom;
 				model.x1 = model.x2 = pixel;
 			}
+
 		}
 
 		model.borderColor = options.borderColor;
 		model.borderWidth = options.borderWidth;
+
 	}
 
 
diff --git a/Chart.Annotation.min.js b/Chart.Annotation.min.js
index 70196460d..5d6689b5e 100644
--- a/Chart.Annotation.min.js
+++ b/Chart.Annotation.min.js
@@ -7,4 +7,4 @@
  * Released under the MIT license
  * https://github.com/chartjs/Chart.Annotation.js/blob/master/LICENSE.md
  */
-!function t(o,n,r){function e(i,l){if(!n[i]){if(!o[i]){var u="function"==typeof require&&require;if(!l&&u)return u(i,!0);if(a)return a(i,!0);var c=new Error("Cannot find module '"+i+"'");throw c.code="MODULE_NOT_FOUND",c}var f=n[i]={exports:{}};o[i][0].call(f.exports,function(t){var n=o[i][1][t];return e(n?n:t)},f,f.exports,t,o,n,r)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<r.length;i++)e(r[i]);return e}({1:[function(t,o,n){},{}],2:[function(t,o,n){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function n(t,n,r){var e,a,i=t._model=t._model||{},l=r.scales[n.xScaleID],u=r.scales[n.yScaleID],c=r.chartArea,f=c.left,s=c.top,d=c.right,x=c.bottom;l&&(e=o(n.xMin)?l.getPixelForValue(n.xMin):c.left,a=o(n.xMax)?l.getPixelForValue(n.xMax):c.right,f=Math.min(e,a),d=Math.max(e,a)),u&&(e=o(n.yMin)?u.getPixelForValue(n.yMin):c.bottom,a=o(n.yMax)?u.getPixelForValue(n.yMax):c.top,s=Math.min(e,a),x=Math.max(e,a)),i.left=f,i.top=s,i.right=d,i.bottom=x,i.borderColor=n.borderColor,i.borderWidth=n.borderWidth,i.backgroundColor=n.backgroundColor}var r=t.Element.extend({draw:function(t){var o=this._view;t.lineWidth=o.borderWidth,t.strokeStyle=o.borderColor,t.fillStyle=o.backgroundColor;var n=o.right-o.left,r=o.bottom-o.top;t.fillRect(o.left,o.top,n,r),t.strokeRect(o.left,o.top,n,r)}});return{Constructor:r,update:n}}},{}],3:[function(t,o,n){var r=t("chart.js");r="function"==typeof r?r:window.Chart;var e=r.helpers,a=e.isArray;r.Annotation=r.Annotation||{};var i=(r.Annotation.defaults={annotations:[]},t("./line.js")(r)),l=t("./box.js")(r),u=r.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},c=r.Annotation.updateFunctions={line:i.update,box:l.update},f=r.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=e.configMerge(o.annotation,r.Annotation.defaults);var n=o.annotation.annotations;if(a(n)){var i=t._annotationObjects=[];n.forEach(function(t,o){var n=u[t.type];n&&i.push(new n({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,n=t.options.annotation;a(o)&&o.forEach(function(o,r){var e=n.annotations[o._index],a=c[e.type];a&&a(o,e,t)})},afterDraw:function(t,o){var n=t._annotationObjects;if(a(n)){var r=t.chart.ctx;n.forEach(function(t){t.transition(o).draw(r)})}}});o.exports=f,r.pluginService.register(new f)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,n){o.exports=function(t){function o(t,o,r){var e=t._model=t._model||{},a=r.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=r.chartArea;isNaN(i)||(o.mode==n?(e.x1=l.left,e.x2=l.right,e.y1=e.y2=i):(e.y1=l.top,e.y2=l.bottom,e.x1=e.x2=i)),e.borderColor=o.borderColor,e.borderWidth=o.borderWidth}var n="horizontal",r=t.Element.extend({draw:function(t){var o=this._view;t.lineWidth=o.borderWidth,t.strokeStyle=o.borderColor,t.beginPath(),t.moveTo(o.x1,o.y1),t.lineTo(o.x2,o.y2),t.stroke()}});return{Constructor:r,update:o}}},{}]},{},[3]);
\ No newline at end of file
+!function t(o,n,e){function r(i,l){if(!n[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var s=n[i]={exports:{}};o[i][0].call(s.exports,function(t){var n=o[i][1][t];return r(n?n:t)},s,s.exports,t,o,n,e)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<e.length;i++)r(e[i]);return r}({1:[function(t,o,n){},{}],2:[function(t,o,n){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function n(t,n,e){var r,a,i=t._model=t._model||{},l=e.scales[n.xScaleID],c=e.scales[n.yScaleID],u=e.chartArea,s=u.left,f=u.top,d=u.right,x=u.bottom;l&&(r=o(n.xMin)?l.getPixelForValue(n.xMin):u.left,a=o(n.xMax)?l.getPixelForValue(n.xMax):u.right,s=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(n.yMin)?c.getPixelForValue(n.yMin):u.bottom,a=o(n.yMax)?c.getPixelForValue(n.yMax):u.top,f=Math.min(r,a),x=Math.max(r,a)),i.left=s,i.top=f,i.right=d,i.bottom=x,i.borderColor=n.borderColor,i.borderWidth=n.borderWidth,i.backgroundColor=n.backgroundColor}var e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.fillStyle=n.backgroundColor;var r=n.right-n.left,a=n.bottom-n.top;e.fillRect(n.left,n.top,r,a),e.strokeRect(n.left,n.top,r,a)}});return{Constructor:e,update:n}}},{}],3:[function(t,o,n){var e=t("chart.js");e="function"==typeof e?e:window.Chart;var r=e.helpers,a=r.isArray;e.Annotation=e.Annotation||{};var i=(e.Annotation.defaults={annotations:[]},t("./line.js")(e)),l=t("./box.js")(e),c=e.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=e.Annotation.updateFunctions={line:i.update,box:l.update},s=e.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,e.Annotation.defaults);var n=o.annotation.annotations;if(a(n)){var i=t._annotationObjects=[];n.forEach(function(t,o){var n=c[t.type];n&&i.push(new n({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,n=t.options.annotation;a(o)&&o.forEach(function(o,e){var r=n.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},afterDraw:function(t,o){var n=t._annotationObjects,e=t.options.annotation;if(a(n)){t.chart.ctx;n.forEach(function(n){var r=e.annotations[n._index];n.transition(o).draw(t,r)})}}});o.exports=s,e.pluginService.register(new s)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,n){o.exports=function(t){function o(t,o,e){console.info(e.chart.ctx);var r=t._model=t._model||{},a=e.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=e.chartArea;isNaN(i)||(o.mode==n?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var n="horizontal",e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.beginPath(),e.moveTo(n.x1,n.y1),e.lineTo(n.x2,n.y2),e.stroke(),e.fillText(o.label?o.label:"test",i.left,a+5),console.info(e)}});return{Constructor:e,update:o}}},{}]},{},[3]);
\ No newline at end of file
diff --git a/samples/horizontal-line.html b/samples/horizontal-line.html
index a24a9084a..b2156f05b 100644
--- a/samples/horizontal-line.html
+++ b/samples/horizontal-line.html
@@ -3,7 +3,7 @@
 
 <head>
     <title>Scatter Chart</title>
-    <script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.6/Chart.bundle.min.js"></script>
     <script src="../Chart.Annotation.js"></script>
     <style>
     canvas {
@@ -133,7 +133,8 @@
                             scaleID: 'y-axis-1',
                             value: '25',
                             borderColor: 'black',
-                            borderWidth: 5
+                            borderWidth: 5,
+							label: 'This is a Custom Label'
                         }]
                     }
                 }
diff --git a/src/box.js b/src/box.js
index 7fc8e01f0..9f01f3934 100644
--- a/src/box.js
+++ b/src/box.js
@@ -1,8 +1,9 @@
 // Box Annotation implementation
 module.exports = function(Chart) {
 	var BoxAnnotation = Chart.Element.extend({
-		draw: function(ctx) {
+		draw: function(chartInstance, options) {
 			var view = this._view;
+            var ctx = chartInstance.chart.ctx;
 
 			// Canvas setup
 			ctx.lineWidth = view.borderWidth;
diff --git a/src/chart.annotation.js b/src/chart.annotation.js
index df56c285c..808fab600 100644
--- a/src/chart.annotation.js
+++ b/src/chart.annotation.js
@@ -67,11 +67,13 @@ var AnnotationPlugin = Chart.PluginBase.extend({
 	afterDraw: function(chartInstance, easingDecimal) {
 		// If we have annotations, draw them
 		var annotationObjects = chartInstance._annotationObjects;
+        var annotationOpts = chartInstance.options.annotation;
+
 		if (isArray(annotationObjects)) {
 			var ctx = chartInstance.chart.ctx;
-
 			annotationObjects.forEach(function(obj) {
-				obj.transition(easingDecimal).draw(ctx);
+                var opts = annotationOpts.annotations[obj._index];
+				obj.transition(easingDecimal).draw(chartInstance, opts);
 			});
 		}
 	}
diff --git a/src/line.js b/src/line.js
index 6056776f2..10bac673a 100644
--- a/src/line.js
+++ b/src/line.js
@@ -5,9 +5,12 @@ module.exports = function(Chart) {
 
 	var LineAnnotation = Chart.Element.extend({
 
-		draw: function(ctx) {
+		draw: function(chartInstance, options) {
 			var view = this._view;
-
+            var ctx = chartInstance.chart.ctx;
+            var scale = chartInstance.scales[options.scaleID];
+            var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
+            var chartArea = chartInstance.chartArea;
 			// Canvas setup
 			ctx.lineWidth = view.borderWidth;
 			ctx.strokeStyle = view.borderColor;
@@ -17,10 +20,16 @@ module.exports = function(Chart) {
 			ctx.moveTo(view.x1, view.y1);
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
+            
+            ctx.fillText(options.label ? options.label : '', chartArea.left, pixel+5);
+
+            console.info(ctx);
+
 		}
 	});
 
 	function lineUpdate(obj, options, chartInstance) {
+        console.info(chartInstance.chart.ctx);
 		var model = obj._model = obj._model || {};
 
 		var scale = chartInstance.scales[options.scaleID];
@@ -32,15 +41,18 @@ module.exports = function(Chart) {
 				model.x1 = chartArea.left;
 				model.x2 = chartArea.right;
 				model.y1 = model.y2 = pixel;
+
 			} else {
 				model.y1 = chartArea.top;
 				model.y2 = chartArea.bottom;
 				model.x1 = model.x2 = pixel;
 			}
+
 		}
 
 		model.borderColor = options.borderColor;
 		model.borderWidth = options.borderWidth;
+
 	}
 
 

From fa1fc6e3e3e0bc4b3cb06219abc080fc46a9e72d Mon Sep 17 00:00:00 2001
From: Adam Pine <apine@PC67827.corporate.gannettfleming.com>
Date: Fri, 8 Jul 2016 14:13:32 -0400
Subject: [PATCH 2/6] Updates readme with label information Fixes an
 inconsistency between the "configuration" section and the "line annotations"
 section, where config section had value in single quotes and line annotation
 section has it as a number.

---
 README.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 34b9dd7ee..f4f366e22 100644
--- a/README.md
+++ b/README.md
@@ -16,9 +16,10 @@ To configure the annotations plugin, you can simply add new config options to yo
 			type: 'line',
 			mode: 'horizontal',
 			scaleID: 'y-axis-1',
-			value: '25',
+			value: 25,
 			borderColor: 'red',
-			borderWidth: 2
+			borderWidth: 2,
+            label: 'Super Important Data'
 		}]
 	}
 }
@@ -43,7 +44,10 @@ Vertical or horizontal lines are supported.
 	borderColor: 'red',
 
 	// Line width
-	borderWidth: 2
+	borderWidth: 2, 
+    
+    //Label
+    label: 'This is a Custom Label'
 }
 ```
 

From f3956793ae3e04d3ab37f4c14b242b4899a978ff Mon Sep 17 00:00:00 2001
From: Adam Pine <apine@PC67827.corporate.gannettfleming.com>
Date: Fri, 8 Jul 2016 14:32:00 -0400
Subject: [PATCH 3/6] Removes the debug lines.

---
 Chart.Annotation.js     | 8 +-------
 Chart.Annotation.min.js | 2 +-
 src/line.js             | 6 ------
 3 files changed, 2 insertions(+), 14 deletions(-)

diff --git a/Chart.Annotation.js b/Chart.Annotation.js
index 11e4cbb36..0b50108b2 100644
--- a/Chart.Annotation.js
+++ b/Chart.Annotation.js
@@ -191,15 +191,11 @@ module.exports = function(Chart) {
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
             
-            ctx.fillText(options.label ? options.label : 'test', chartArea.left, pixel+5);
-
-            console.info(ctx);
-
+            ctx.fillText(options.label ? options.label : '', chartArea.left, pixel+5);
 		}
 	});
 
 	function lineUpdate(obj, options, chartInstance) {
-        console.info(chartInstance.chart.ctx);
 		var model = obj._model = obj._model || {};
 
 		var scale = chartInstance.scales[options.scaleID];
@@ -217,9 +213,7 @@ module.exports = function(Chart) {
 				model.y2 = chartArea.bottom;
 				model.x1 = model.x2 = pixel;
 			}
-
 		}
-
 		model.borderColor = options.borderColor;
 		model.borderWidth = options.borderWidth;
 
diff --git a/Chart.Annotation.min.js b/Chart.Annotation.min.js
index 5d6689b5e..88f749a38 100644
--- a/Chart.Annotation.min.js
+++ b/Chart.Annotation.min.js
@@ -7,4 +7,4 @@
  * Released under the MIT license
  * https://github.com/chartjs/Chart.Annotation.js/blob/master/LICENSE.md
  */
-!function t(o,n,e){function r(i,l){if(!n[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var s=n[i]={exports:{}};o[i][0].call(s.exports,function(t){var n=o[i][1][t];return r(n?n:t)},s,s.exports,t,o,n,e)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<e.length;i++)r(e[i]);return r}({1:[function(t,o,n){},{}],2:[function(t,o,n){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function n(t,n,e){var r,a,i=t._model=t._model||{},l=e.scales[n.xScaleID],c=e.scales[n.yScaleID],u=e.chartArea,s=u.left,f=u.top,d=u.right,x=u.bottom;l&&(r=o(n.xMin)?l.getPixelForValue(n.xMin):u.left,a=o(n.xMax)?l.getPixelForValue(n.xMax):u.right,s=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(n.yMin)?c.getPixelForValue(n.yMin):u.bottom,a=o(n.yMax)?c.getPixelForValue(n.yMax):u.top,f=Math.min(r,a),x=Math.max(r,a)),i.left=s,i.top=f,i.right=d,i.bottom=x,i.borderColor=n.borderColor,i.borderWidth=n.borderWidth,i.backgroundColor=n.backgroundColor}var e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.fillStyle=n.backgroundColor;var r=n.right-n.left,a=n.bottom-n.top;e.fillRect(n.left,n.top,r,a),e.strokeRect(n.left,n.top,r,a)}});return{Constructor:e,update:n}}},{}],3:[function(t,o,n){var e=t("chart.js");e="function"==typeof e?e:window.Chart;var r=e.helpers,a=r.isArray;e.Annotation=e.Annotation||{};var i=(e.Annotation.defaults={annotations:[]},t("./line.js")(e)),l=t("./box.js")(e),c=e.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=e.Annotation.updateFunctions={line:i.update,box:l.update},s=e.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,e.Annotation.defaults);var n=o.annotation.annotations;if(a(n)){var i=t._annotationObjects=[];n.forEach(function(t,o){var n=c[t.type];n&&i.push(new n({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,n=t.options.annotation;a(o)&&o.forEach(function(o,e){var r=n.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},afterDraw:function(t,o){var n=t._annotationObjects,e=t.options.annotation;if(a(n)){t.chart.ctx;n.forEach(function(n){var r=e.annotations[n._index];n.transition(o).draw(t,r)})}}});o.exports=s,e.pluginService.register(new s)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,n){o.exports=function(t){function o(t,o,e){console.info(e.chart.ctx);var r=t._model=t._model||{},a=e.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=e.chartArea;isNaN(i)||(o.mode==n?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var n="horizontal",e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.beginPath(),e.moveTo(n.x1,n.y1),e.lineTo(n.x2,n.y2),e.stroke(),e.fillText(o.label?o.label:"test",i.left,a+5),console.info(e)}});return{Constructor:e,update:o}}},{}]},{},[3]);
\ No newline at end of file
+!function t(o,n,e){function r(i,l){if(!n[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var s=n[i]={exports:{}};o[i][0].call(s.exports,function(t){var n=o[i][1][t];return r(n?n:t)},s,s.exports,t,o,n,e)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<e.length;i++)r(e[i]);return r}({1:[function(t,o,n){},{}],2:[function(t,o,n){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function n(t,n,e){var r,a,i=t._model=t._model||{},l=e.scales[n.xScaleID],c=e.scales[n.yScaleID],u=e.chartArea,s=u.left,f=u.top,d=u.right,x=u.bottom;l&&(r=o(n.xMin)?l.getPixelForValue(n.xMin):u.left,a=o(n.xMax)?l.getPixelForValue(n.xMax):u.right,s=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(n.yMin)?c.getPixelForValue(n.yMin):u.bottom,a=o(n.yMax)?c.getPixelForValue(n.yMax):u.top,f=Math.min(r,a),x=Math.max(r,a)),i.left=s,i.top=f,i.right=d,i.bottom=x,i.borderColor=n.borderColor,i.borderWidth=n.borderWidth,i.backgroundColor=n.backgroundColor}var e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.fillStyle=n.backgroundColor;var r=n.right-n.left,a=n.bottom-n.top;e.fillRect(n.left,n.top,r,a),e.strokeRect(n.left,n.top,r,a)}});return{Constructor:e,update:n}}},{}],3:[function(t,o,n){var e=t("chart.js");e="function"==typeof e?e:window.Chart;var r=e.helpers,a=r.isArray;e.Annotation=e.Annotation||{};var i=(e.Annotation.defaults={annotations:[]},t("./line.js")(e)),l=t("./box.js")(e),c=e.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=e.Annotation.updateFunctions={line:i.update,box:l.update},s=e.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,e.Annotation.defaults);var n=o.annotation.annotations;if(a(n)){var i=t._annotationObjects=[];n.forEach(function(t,o){var n=c[t.type];n&&i.push(new n({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,n=t.options.annotation;a(o)&&o.forEach(function(o,e){var r=n.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},afterDraw:function(t,o){var n=t._annotationObjects,e=t.options.annotation;if(a(n)){t.chart.ctx;n.forEach(function(n){var r=e.annotations[n._index];n.transition(o).draw(t,r)})}}});o.exports=s,e.pluginService.register(new s)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,n){o.exports=function(t){function o(t,o,e){var r=t._model=t._model||{},a=e.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=e.chartArea;isNaN(i)||(o.mode==n?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var n="horizontal",e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.beginPath(),e.moveTo(n.x1,n.y1),e.lineTo(n.x2,n.y2),e.stroke(),e.fillText(o.label?o.label:"",i.left,a+5)}});return{Constructor:e,update:o}}},{}]},{},[3]);
\ No newline at end of file
diff --git a/src/line.js b/src/line.js
index 10bac673a..f160c8a49 100644
--- a/src/line.js
+++ b/src/line.js
@@ -22,14 +22,10 @@ module.exports = function(Chart) {
 			ctx.stroke();
             
             ctx.fillText(options.label ? options.label : '', chartArea.left, pixel+5);
-
-            console.info(ctx);
-
 		}
 	});
 
 	function lineUpdate(obj, options, chartInstance) {
-        console.info(chartInstance.chart.ctx);
 		var model = obj._model = obj._model || {};
 
 		var scale = chartInstance.scales[options.scaleID];
@@ -47,9 +43,7 @@ module.exports = function(Chart) {
 				model.y2 = chartArea.bottom;
 				model.x1 = model.x2 = pixel;
 			}
-
 		}
-
 		model.borderColor = options.borderColor;
 		model.borderWidth = options.borderWidth;
 

From 3965bfbcae9fa11c14e251595310ad3bdc633518 Mon Sep 17 00:00:00 2001
From: Adam Pine <apine@PC67827.corporate.gannettfleming.com>
Date: Mon, 11 Jul 2016 12:35:54 -0400
Subject: [PATCH 4/6] Changes annotation to be more of a badge, than side
 label, so that is doesn't overlap data.

---
 Chart.Annotation.js          | 13 +++++++++++--
 Chart.Annotation.min.js      |  2 +-
 samples/horizontal-line.html |  4 ++--
 src/chart.annotation.js      |  2 +-
 src/line.js                  | 11 ++++++++++-
 5 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/Chart.Annotation.js b/Chart.Annotation.js
index 0b50108b2..2878dd788 100644
--- a/Chart.Annotation.js
+++ b/Chart.Annotation.js
@@ -149,7 +149,7 @@ var AnnotationPlugin = Chart.PluginBase.extend({
 		}
 	},
 
-	afterDraw: function(chartInstance, easingDecimal) {
+	beforeDraw: function(chartInstance, easingDecimal) {
 		// If we have annotations, draw them
 		var annotationObjects = chartInstance._annotationObjects;
         var annotationOpts = chartInstance.options.annotation;
@@ -191,7 +191,16 @@ module.exports = function(Chart) {
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
             
-            ctx.fillText(options.label ? options.label : '', chartArea.left, pixel+5);
+            ctx.fillStyle = 'white';
+            ctx.fillRect((chartArea.right/2), pixel-5, 35, 15);
+            
+            ctx.fillStyle = view.borderColor;
+            ctx.strokeRect((chartArea.right/2), pixel-5, 35, 15);
+            
+            
+            ctx.fillStyle = 'black';
+            ctx.textAlign = 'left';
+            ctx.fillText(options.label ? options.label : '', (chartArea.right/2)+5, pixel-5);
 		}
 	});
 
diff --git a/Chart.Annotation.min.js b/Chart.Annotation.min.js
index 88f749a38..5a3c145d1 100644
--- a/Chart.Annotation.min.js
+++ b/Chart.Annotation.min.js
@@ -7,4 +7,4 @@
  * Released under the MIT license
  * https://github.com/chartjs/Chart.Annotation.js/blob/master/LICENSE.md
  */
-!function t(o,n,e){function r(i,l){if(!n[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var s=n[i]={exports:{}};o[i][0].call(s.exports,function(t){var n=o[i][1][t];return r(n?n:t)},s,s.exports,t,o,n,e)}return n[i].exports}for(var a="function"==typeof require&&require,i=0;i<e.length;i++)r(e[i]);return r}({1:[function(t,o,n){},{}],2:[function(t,o,n){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function n(t,n,e){var r,a,i=t._model=t._model||{},l=e.scales[n.xScaleID],c=e.scales[n.yScaleID],u=e.chartArea,s=u.left,f=u.top,d=u.right,x=u.bottom;l&&(r=o(n.xMin)?l.getPixelForValue(n.xMin):u.left,a=o(n.xMax)?l.getPixelForValue(n.xMax):u.right,s=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(n.yMin)?c.getPixelForValue(n.yMin):u.bottom,a=o(n.yMax)?c.getPixelForValue(n.yMax):u.top,f=Math.min(r,a),x=Math.max(r,a)),i.left=s,i.top=f,i.right=d,i.bottom=x,i.borderColor=n.borderColor,i.borderWidth=n.borderWidth,i.backgroundColor=n.backgroundColor}var e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.fillStyle=n.backgroundColor;var r=n.right-n.left,a=n.bottom-n.top;e.fillRect(n.left,n.top,r,a),e.strokeRect(n.left,n.top,r,a)}});return{Constructor:e,update:n}}},{}],3:[function(t,o,n){var e=t("chart.js");e="function"==typeof e?e:window.Chart;var r=e.helpers,a=r.isArray;e.Annotation=e.Annotation||{};var i=(e.Annotation.defaults={annotations:[]},t("./line.js")(e)),l=t("./box.js")(e),c=e.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=e.Annotation.updateFunctions={line:i.update,box:l.update},s=e.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,e.Annotation.defaults);var n=o.annotation.annotations;if(a(n)){var i=t._annotationObjects=[];n.forEach(function(t,o){var n=c[t.type];n&&i.push(new n({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,n=t.options.annotation;a(o)&&o.forEach(function(o,e){var r=n.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},afterDraw:function(t,o){var n=t._annotationObjects,e=t.options.annotation;if(a(n)){t.chart.ctx;n.forEach(function(n){var r=e.annotations[n._index];n.transition(o).draw(t,r)})}}});o.exports=s,e.pluginService.register(new s)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,n){o.exports=function(t){function o(t,o,e){var r=t._model=t._model||{},a=e.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=e.chartArea;isNaN(i)||(o.mode==n?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var n="horizontal",e=t.Element.extend({draw:function(t,o){var n=this._view,e=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;e.lineWidth=n.borderWidth,e.strokeStyle=n.borderColor,e.beginPath(),e.moveTo(n.x1,n.y1),e.lineTo(n.x2,n.y2),e.stroke(),e.fillText(o.label?o.label:"",i.left,a+5)}});return{Constructor:e,update:o}}},{}]},{},[3]);
\ No newline at end of file
+!function t(o,e,n){function r(i,l){if(!e[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var f=e[i]={exports:{}};o[i][0].call(f.exports,function(t){var e=o[i][1][t];return r(e?e:t)},f,f.exports,t,o,e,n)}return e[i].exports}for(var a="function"==typeof require&&require,i=0;i<n.length;i++)r(n[i]);return r}({1:[function(t,o,e){},{}],2:[function(t,o,e){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function e(t,e,n){var r,a,i=t._model=t._model||{},l=n.scales[e.xScaleID],c=n.scales[e.yScaleID],u=n.chartArea,f=u.left,s=u.top,d=u.right,x=u.bottom;l&&(r=o(e.xMin)?l.getPixelForValue(e.xMin):u.left,a=o(e.xMax)?l.getPixelForValue(e.xMax):u.right,f=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(e.yMin)?c.getPixelForValue(e.yMin):u.bottom,a=o(e.yMax)?c.getPixelForValue(e.yMax):u.top,s=Math.min(r,a),x=Math.max(r,a)),i.left=f,i.top=s,i.right=d,i.bottom=x,i.borderColor=e.borderColor,i.borderWidth=e.borderWidth,i.backgroundColor=e.backgroundColor}var n=t.Element.extend({draw:function(t,o){var e=this._view,n=t.chart.ctx;n.lineWidth=e.borderWidth,n.strokeStyle=e.borderColor,n.fillStyle=e.backgroundColor;var r=e.right-e.left,a=e.bottom-e.top;n.fillRect(e.left,e.top,r,a),n.strokeRect(e.left,e.top,r,a)}});return{Constructor:n,update:e}}},{}],3:[function(t,o,e){var n=t("chart.js");n="function"==typeof n?n:window.Chart;var r=n.helpers,a=r.isArray;n.Annotation=n.Annotation||{};var i=(n.Annotation.defaults={annotations:[]},t("./line.js")(n)),l=t("./box.js")(n),c=n.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=n.Annotation.updateFunctions={line:i.update,box:l.update},f=n.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,n.Annotation.defaults);var e=o.annotation.annotations;if(a(e)){var i=t._annotationObjects=[];e.forEach(function(t,o){var e=c[t.type];e&&i.push(new e({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,e=t.options.annotation;a(o)&&o.forEach(function(o,n){var r=e.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},beforeDraw:function(t,o){var e=t._annotationObjects,n=t.options.annotation;if(a(e)){t.chart.ctx;e.forEach(function(e){var r=n.annotations[e._index];e.transition(o).draw(t,r)})}}});o.exports=f,n.pluginService.register(new f)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,e){o.exports=function(t){function o(t,o,n){var r=t._model=t._model||{},a=n.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=n.chartArea;isNaN(i)||(o.mode==e?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var e="horizontal",n=t.Element.extend({draw:function(t,o){var e=this._view,n=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;n.lineWidth=e.borderWidth,n.strokeStyle=e.borderColor,n.beginPath(),n.moveTo(e.x1,e.y1),n.lineTo(e.x2,e.y2),n.stroke(),n.fillStyle="white",n.fillRect(i.right/2,a-5,35,15),n.fillStyle=e.borderColor,n.strokeRect(i.right/2,a-5,35,15),n.fillStyle="black",n.textAlign="left",n.fillText(o.label?o.label:"",i.right/2+5,a-5)}});return{Constructor:n,update:o}}},{}]},{},[3]);
\ No newline at end of file
diff --git a/samples/horizontal-line.html b/samples/horizontal-line.html
index b2156f05b..85b962a3b 100644
--- a/samples/horizontal-line.html
+++ b/samples/horizontal-line.html
@@ -131,10 +131,10 @@
                             type: 'line',
                             mode: 'horizontal',
                             scaleID: 'y-axis-1',
-                            value: '25',
+                            value: 45,
                             borderColor: 'black',
                             borderWidth: 5,
-							label: 'This is a Custom Label'
+							label: '%B: 45%'
                         }]
                     }
                 }
diff --git a/src/chart.annotation.js b/src/chart.annotation.js
index 808fab600..73f0fde26 100644
--- a/src/chart.annotation.js
+++ b/src/chart.annotation.js
@@ -64,7 +64,7 @@ var AnnotationPlugin = Chart.PluginBase.extend({
 		}
 	},
 
-	afterDraw: function(chartInstance, easingDecimal) {
+	beforeDraw: function(chartInstance, easingDecimal) {
 		// If we have annotations, draw them
 		var annotationObjects = chartInstance._annotationObjects;
         var annotationOpts = chartInstance.options.annotation;
diff --git a/src/line.js b/src/line.js
index f160c8a49..eb371bd11 100644
--- a/src/line.js
+++ b/src/line.js
@@ -21,7 +21,16 @@ module.exports = function(Chart) {
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
             
-            ctx.fillText(options.label ? options.label : '', chartArea.left, pixel+5);
+            ctx.fillStyle = 'white';
+            ctx.fillRect((chartArea.right/2), pixel-5, 35, 15);
+            
+            ctx.fillStyle = view.borderColor;
+            ctx.strokeRect((chartArea.right/2), pixel-5, 35, 15);
+            
+            
+            ctx.fillStyle = 'black';
+            ctx.textAlign = 'left';
+            ctx.fillText(options.label ? options.label : '', (chartArea.right/2)+5, pixel-5);
 		}
 	});
 

From 1065dda97d1aafe118fd17ed93393f11a265f426 Mon Sep 17 00:00:00 2001
From: Adam Pine <apine@PC67827.corporate.gannettfleming.com>
Date: Tue, 12 Jul 2016 13:16:47 -0400
Subject: [PATCH 5/6] Cleanup some data, for PR. Made it so the badge is drawn
 conditionally, so that if you don't have a label, it doesn't show up, to
 avoid an null label badge. Added a todo comment about what I would like to do
 with this eventually.

---
 Chart.Annotation.js          | 124 ++++++++++++++++++-----------------
 Chart.Annotation.min.js      |   2 +-
 samples/horizontal-line.html |   2 +-
 src/chart.annotation.js      |   2 +-
 src/line.js                  | 107 ++++++++++++++++--------------
 5 files changed, 123 insertions(+), 114 deletions(-)

diff --git a/Chart.Annotation.js b/Chart.Annotation.js
index 2878dd788..30b9bf67a 100644
--- a/Chart.Annotation.js
+++ b/Chart.Annotation.js
@@ -112,7 +112,7 @@ var updateFunctions = Chart.Annotation.updateFunctions = {
 	box: boxAnnotation.update
 };
 
-// Chartjs Zoom Plugin
+// Chartjs Plugin hooks.
 var AnnotationPlugin = Chart.PluginBase.extend({
 	beforeInit: function(chartInstance) {
 		var options = chartInstance.options;
@@ -169,70 +169,74 @@ Chart.pluginService.register(new AnnotationPlugin());
 
 },{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(require,module,exports){
 // Line Annotation implementation
-module.exports = function(Chart) {
-	var horizontalKeyword = 'horizontal';
-	var verticalKeyword = 'vertical';
+module.exports = function (Chart) {
+    var horizontalKeyword = 'horizontal';
+    var verticalKeyword = 'vertical';
 
-	var LineAnnotation = Chart.Element.extend({
+    var LineAnnotation = Chart.Element.extend({
 
-		draw: function(chartInstance, options) {
-			var view = this._view;
+        draw: function (chartInstance, options) {
+            var view = this._view;
             var ctx = chartInstance.chart.ctx;
             var scale = chartInstance.scales[options.scaleID];
             var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
             var chartArea = chartInstance.chartArea;
-			// Canvas setup
-			ctx.lineWidth = view.borderWidth;
-			ctx.strokeStyle = view.borderColor;
-
-			// Draw
-			ctx.beginPath();
-			ctx.moveTo(view.x1, view.y1);
-			ctx.lineTo(view.x2, view.y2);
-			ctx.stroke();
-            
-            ctx.fillStyle = 'white';
-            ctx.fillRect((chartArea.right/2), pixel-5, 35, 15);
-            
-            ctx.fillStyle = view.borderColor;
-            ctx.strokeRect((chartArea.right/2), pixel-5, 35, 15);
-            
-            
-            ctx.fillStyle = 'black';
-            ctx.textAlign = 'left';
-            ctx.fillText(options.label ? options.label : '', (chartArea.right/2)+5, pixel-5);
-		}
-	});
-
-	function lineUpdate(obj, options, chartInstance) {
-		var model = obj._model = obj._model || {};
-
-		var scale = chartInstance.scales[options.scaleID];
-		var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
-		var chartArea = chartInstance.chartArea;
-
-		if (!isNaN(pixel)) {
-			if (options.mode == horizontalKeyword) {
-				model.x1 = chartArea.left;
-				model.x2 = chartArea.right;
-				model.y1 = model.y2 = pixel;
-
-			} else {
-				model.y1 = chartArea.top;
-				model.y2 = chartArea.bottom;
-				model.x1 = model.x2 = pixel;
-			}
-		}
-		model.borderColor = options.borderColor;
-		model.borderWidth = options.borderWidth;
-
-	}
-
-
-	return {
-		Constructor: LineAnnotation,
-		update: lineUpdate
-	};
+            // Canvas setup
+            ctx.lineWidth = view.borderWidth;
+            ctx.strokeStyle = view.borderColor;
+
+            // Draw
+            ctx.beginPath();
+            ctx.moveTo(view.x1, view.y1);
+            ctx.lineTo(view.x2, view.y2);
+            ctx.stroke();
+            //Verify that label has been specified, so that we don't add a null label.
+            //TODO: Added customizable badge options, like: where to display the badge, left/right/center. or, Badge Border Color and Badge Background color. 
+            //I would also like to add an option for different directional offsets, horizontalOffset, and VertOffset for example.
+            //Current issue with background color is that it likes to disappear when you hover over any other element on the chart.
+            if (options.label) {
+                //draw the background of the badge.
+                ctx.fillStyle = 'white';
+                ctx.fillRect((chartArea.right / 2), pixel - 5, 35, 15);
+                //Draw the border around the badge.
+                ctx.fillStyle = view.borderColor;
+                ctx.strokeRect((chartArea.right / 2), pixel - 5, 35, 15);
+                //Draw the text of the badge.
+                ctx.fillStyle = 'black';
+                ctx.textAlign = 'left';
+                ctx.fillText(options.label ? options.label : '', (chartArea.right / 2) + 5, pixel - 5);
+            }
+        }
+    });
+
+    function lineUpdate(obj, options, chartInstance) {
+        var model = obj._model = obj._model || {};
+
+        var scale = chartInstance.scales[options.scaleID];
+        var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
+        var chartArea = chartInstance.chartArea;
+
+        if (!isNaN(pixel)) {
+            if (options.mode == horizontalKeyword) {
+                model.x1 = chartArea.left;
+                model.x2 = chartArea.right;
+                model.y1 = model.y2 = pixel;
+
+            } else {
+                model.y1 = chartArea.top;
+                model.y2 = chartArea.bottom;
+                model.x1 = model.x2 = pixel;
+            }
+        }
+        model.borderColor = options.borderColor;
+        model.borderWidth = options.borderWidth;
+
+    }
+
+
+    return {
+        Constructor: LineAnnotation,
+        update: lineUpdate
+    };
 };
-
 },{}]},{},[3]);
diff --git a/Chart.Annotation.min.js b/Chart.Annotation.min.js
index 5a3c145d1..b730cb709 100644
--- a/Chart.Annotation.min.js
+++ b/Chart.Annotation.min.js
@@ -7,4 +7,4 @@
  * Released under the MIT license
  * https://github.com/chartjs/Chart.Annotation.js/blob/master/LICENSE.md
  */
-!function t(o,e,n){function r(i,l){if(!e[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var f=e[i]={exports:{}};o[i][0].call(f.exports,function(t){var e=o[i][1][t];return r(e?e:t)},f,f.exports,t,o,e,n)}return e[i].exports}for(var a="function"==typeof require&&require,i=0;i<n.length;i++)r(n[i]);return r}({1:[function(t,o,e){},{}],2:[function(t,o,e){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function e(t,e,n){var r,a,i=t._model=t._model||{},l=n.scales[e.xScaleID],c=n.scales[e.yScaleID],u=n.chartArea,f=u.left,s=u.top,d=u.right,x=u.bottom;l&&(r=o(e.xMin)?l.getPixelForValue(e.xMin):u.left,a=o(e.xMax)?l.getPixelForValue(e.xMax):u.right,f=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(e.yMin)?c.getPixelForValue(e.yMin):u.bottom,a=o(e.yMax)?c.getPixelForValue(e.yMax):u.top,s=Math.min(r,a),x=Math.max(r,a)),i.left=f,i.top=s,i.right=d,i.bottom=x,i.borderColor=e.borderColor,i.borderWidth=e.borderWidth,i.backgroundColor=e.backgroundColor}var n=t.Element.extend({draw:function(t,o){var e=this._view,n=t.chart.ctx;n.lineWidth=e.borderWidth,n.strokeStyle=e.borderColor,n.fillStyle=e.backgroundColor;var r=e.right-e.left,a=e.bottom-e.top;n.fillRect(e.left,e.top,r,a),n.strokeRect(e.left,e.top,r,a)}});return{Constructor:n,update:e}}},{}],3:[function(t,o,e){var n=t("chart.js");n="function"==typeof n?n:window.Chart;var r=n.helpers,a=r.isArray;n.Annotation=n.Annotation||{};var i=(n.Annotation.defaults={annotations:[]},t("./line.js")(n)),l=t("./box.js")(n),c=n.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=n.Annotation.updateFunctions={line:i.update,box:l.update},f=n.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,n.Annotation.defaults);var e=o.annotation.annotations;if(a(e)){var i=t._annotationObjects=[];e.forEach(function(t,o){var e=c[t.type];e&&i.push(new e({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,e=t.options.annotation;a(o)&&o.forEach(function(o,n){var r=e.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},beforeDraw:function(t,o){var e=t._annotationObjects,n=t.options.annotation;if(a(e)){t.chart.ctx;e.forEach(function(e){var r=n.annotations[e._index];e.transition(o).draw(t,r)})}}});o.exports=f,n.pluginService.register(new f)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,e){o.exports=function(t){function o(t,o,n){var r=t._model=t._model||{},a=n.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=n.chartArea;isNaN(i)||(o.mode==e?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var e="horizontal",n=t.Element.extend({draw:function(t,o){var e=this._view,n=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;n.lineWidth=e.borderWidth,n.strokeStyle=e.borderColor,n.beginPath(),n.moveTo(e.x1,e.y1),n.lineTo(e.x2,e.y2),n.stroke(),n.fillStyle="white",n.fillRect(i.right/2,a-5,35,15),n.fillStyle=e.borderColor,n.strokeRect(i.right/2,a-5,35,15),n.fillStyle="black",n.textAlign="left",n.fillText(o.label?o.label:"",i.right/2+5,a-5)}});return{Constructor:n,update:o}}},{}]},{},[3]);
\ No newline at end of file
+!function t(o,e,n){function r(i,l){if(!e[i]){if(!o[i]){var c="function"==typeof require&&require;if(!l&&c)return c(i,!0);if(a)return a(i,!0);var u=new Error("Cannot find module '"+i+"'");throw u.code="MODULE_NOT_FOUND",u}var f=e[i]={exports:{}};o[i][0].call(f.exports,function(t){var e=o[i][1][t];return r(e?e:t)},f,f.exports,t,o,e,n)}return e[i].exports}for(var a="function"==typeof require&&require,i=0;i<n.length;i++)r(n[i]);return r}({1:[function(t,o,e){},{}],2:[function(t,o,e){o.exports=function(t){function o(t){return!isNaN(t)&&isFinite(t)}function e(t,e,n){var r,a,i=t._model=t._model||{},l=n.scales[e.xScaleID],c=n.scales[e.yScaleID],u=n.chartArea,f=u.left,s=u.top,d=u.right,x=u.bottom;l&&(r=o(e.xMin)?l.getPixelForValue(e.xMin):u.left,a=o(e.xMax)?l.getPixelForValue(e.xMax):u.right,f=Math.min(r,a),d=Math.max(r,a)),c&&(r=o(e.yMin)?c.getPixelForValue(e.yMin):u.bottom,a=o(e.yMax)?c.getPixelForValue(e.yMax):u.top,s=Math.min(r,a),x=Math.max(r,a)),i.left=f,i.top=s,i.right=d,i.bottom=x,i.borderColor=e.borderColor,i.borderWidth=e.borderWidth,i.backgroundColor=e.backgroundColor}var n=t.Element.extend({draw:function(t,o){var e=this._view,n=t.chart.ctx;n.lineWidth=e.borderWidth,n.strokeStyle=e.borderColor,n.fillStyle=e.backgroundColor;var r=e.right-e.left,a=e.bottom-e.top;n.fillRect(e.left,e.top,r,a),n.strokeRect(e.left,e.top,r,a)}});return{Constructor:n,update:e}}},{}],3:[function(t,o,e){var n=t("chart.js");n="function"==typeof n?n:window.Chart;var r=n.helpers,a=r.isArray;n.Annotation=n.Annotation||{};var i=(n.Annotation.defaults={annotations:[]},t("./line.js")(n)),l=t("./box.js")(n),c=n.Annotation.annotationTypes={line:i.Constructor,box:l.Constructor},u=n.Annotation.updateFunctions={line:i.update,box:l.update},f=n.PluginBase.extend({beforeInit:function(t){var o=t.options;o.annotation=r.configMerge(o.annotation,n.Annotation.defaults);var e=o.annotation.annotations;if(a(e)){var i=t._annotationObjects=[];e.forEach(function(t,o){var e=c[t.type];e&&i.push(new e({_index:o}))})}},afterScaleUpdate:function(t){var o=t._annotationObjects,e=t.options.annotation;a(o)&&o.forEach(function(o,n){var r=e.annotations[o._index],a=u[r.type];a&&a(o,r,t)})},beforeDraw:function(t,o){var e=t._annotationObjects,n=t.options.annotation;if(a(e)){t.chart.ctx;e.forEach(function(e){var r=n.annotations[e._index];e.transition(o).draw(t,r)})}}});o.exports=f,n.pluginService.register(new f)},{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(t,o,e){o.exports=function(t){function o(t,o,n){var r=t._model=t._model||{},a=n.scales[o.scaleID],i=a?a.getPixelForValue(o.value):NaN,l=n.chartArea;isNaN(i)||(o.mode==e?(r.x1=l.left,r.x2=l.right,r.y1=r.y2=i):(r.y1=l.top,r.y2=l.bottom,r.x1=r.x2=i)),r.borderColor=o.borderColor,r.borderWidth=o.borderWidth}var e="horizontal",n=t.Element.extend({draw:function(t,o){var e=this._view,n=t.chart.ctx,r=t.scales[o.scaleID],a=r?r.getPixelForValue(o.value):NaN,i=t.chartArea;n.lineWidth=e.borderWidth,n.strokeStyle=e.borderColor,n.beginPath(),n.moveTo(e.x1,e.y1),n.lineTo(e.x2,e.y2),n.stroke(),o.label&&(n.fillStyle="white",n.fillRect(i.right/2,a-5,35,15),n.fillStyle=e.borderColor,n.strokeRect(i.right/2,a-5,35,15),n.fillStyle="black",n.textAlign="left",n.fillText(o.label?o.label:"",i.right/2+5,a-5))}});return{Constructor:n,update:o}}},{}]},{},[3]);
\ No newline at end of file
diff --git a/samples/horizontal-line.html b/samples/horizontal-line.html
index 85b962a3b..daaad0d18 100644
--- a/samples/horizontal-line.html
+++ b/samples/horizontal-line.html
@@ -131,7 +131,7 @@
                             type: 'line',
                             mode: 'horizontal',
                             scaleID: 'y-axis-1',
-                            value: 45,
+                            value: 25,
                             borderColor: 'black',
                             borderWidth: 5,
 							label: '%B: 45%'
diff --git a/src/chart.annotation.js b/src/chart.annotation.js
index 73f0fde26..a571784c2 100644
--- a/src/chart.annotation.js
+++ b/src/chart.annotation.js
@@ -27,7 +27,7 @@ var updateFunctions = Chart.Annotation.updateFunctions = {
 	box: boxAnnotation.update
 };
 
-// Chartjs Zoom Plugin
+// Chartjs Plugin hooks.
 var AnnotationPlugin = Chart.PluginBase.extend({
 	beforeInit: function(chartInstance) {
 		var options = chartInstance.options;
diff --git a/src/line.js b/src/line.js
index eb371bd11..ad973d582 100644
--- a/src/line.js
+++ b/src/line.js
@@ -1,66 +1,71 @@
 // Line Annotation implementation
-module.exports = function(Chart) {
-	var horizontalKeyword = 'horizontal';
-	var verticalKeyword = 'vertical';
+module.exports = function (Chart) {
+    var horizontalKeyword = 'horizontal';
+    var verticalKeyword = 'vertical';
 
-	var LineAnnotation = Chart.Element.extend({
+    var LineAnnotation = Chart.Element.extend({
 
-		draw: function(chartInstance, options) {
-			var view = this._view;
+        draw: function (chartInstance, options) {
+            var view = this._view;
             var ctx = chartInstance.chart.ctx;
             var scale = chartInstance.scales[options.scaleID];
             var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
             var chartArea = chartInstance.chartArea;
-			// Canvas setup
-			ctx.lineWidth = view.borderWidth;
-			ctx.strokeStyle = view.borderColor;
+            // Canvas setup
+            ctx.lineWidth = view.borderWidth;
+            ctx.strokeStyle = view.borderColor;
 
-			// Draw
-			ctx.beginPath();
-			ctx.moveTo(view.x1, view.y1);
-			ctx.lineTo(view.x2, view.y2);
-			ctx.stroke();
-            
-            ctx.fillStyle = 'white';
-            ctx.fillRect((chartArea.right/2), pixel-5, 35, 15);
-            
-            ctx.fillStyle = view.borderColor;
-            ctx.strokeRect((chartArea.right/2), pixel-5, 35, 15);
-            
-            
-            ctx.fillStyle = 'black';
-            ctx.textAlign = 'left';
-            ctx.fillText(options.label ? options.label : '', (chartArea.right/2)+5, pixel-5);
-		}
-	});
+            // Draw
+            ctx.beginPath();
+            ctx.moveTo(view.x1, view.y1);
+            ctx.lineTo(view.x2, view.y2);
+            ctx.stroke();
+            //Verify that label has been specified, so that we don't add a null label.
+            //TODO: Added customizable badge options, like: where to display the badge, left/right/center. or, Badge Border Color and Badge Background color. 
+            //I would also like to add an option for different directional offsets, horizontalOffset, and VertOffset for example.
+            //Current issue with background color is that it likes to disappear when you hover over any other element on the chart.
+            if (options.label) {
+                //draw the background of the badge.
+                ctx.fillStyle = 'white';
+                ctx.fillRect((chartArea.right / 2), pixel - 5, 35, 15);
+                //Draw the border around the badge.
+                ctx.fillStyle = view.borderColor;
+                ctx.strokeRect((chartArea.right / 2), pixel - 5, 35, 15);
+                //Draw the text of the badge.
+                ctx.fillStyle = 'black';
+                ctx.textAlign = 'left';
+                ctx.fillText(options.label ? options.label : '', (chartArea.right / 2) + 5, pixel - 5);
+            }
+        }
+    });
 
-	function lineUpdate(obj, options, chartInstance) {
-		var model = obj._model = obj._model || {};
+    function lineUpdate(obj, options, chartInstance) {
+        var model = obj._model = obj._model || {};
 
-		var scale = chartInstance.scales[options.scaleID];
-		var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
-		var chartArea = chartInstance.chartArea;
+        var scale = chartInstance.scales[options.scaleID];
+        var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
+        var chartArea = chartInstance.chartArea;
 
-		if (!isNaN(pixel)) {
-			if (options.mode == horizontalKeyword) {
-				model.x1 = chartArea.left;
-				model.x2 = chartArea.right;
-				model.y1 = model.y2 = pixel;
+        if (!isNaN(pixel)) {
+            if (options.mode == horizontalKeyword) {
+                model.x1 = chartArea.left;
+                model.x2 = chartArea.right;
+                model.y1 = model.y2 = pixel;
 
-			} else {
-				model.y1 = chartArea.top;
-				model.y2 = chartArea.bottom;
-				model.x1 = model.x2 = pixel;
-			}
-		}
-		model.borderColor = options.borderColor;
-		model.borderWidth = options.borderWidth;
+            } else {
+                model.y1 = chartArea.top;
+                model.y2 = chartArea.bottom;
+                model.x1 = model.x2 = pixel;
+            }
+        }
+        model.borderColor = options.borderColor;
+        model.borderWidth = options.borderWidth;
 
-	}
+    }
 
 
-	return {
-		Constructor: LineAnnotation,
-		update: lineUpdate
-	};
-};
+    return {
+        Constructor: LineAnnotation,
+        update: lineUpdate
+    };
+};
\ No newline at end of file

From dee003416f46ad73886a3db5bc585b26570943a6 Mon Sep 17 00:00:00 2001
From: Adam Pine <apine@PC67827.corporate.gannettfleming.com>
Date: Tue, 19 Jul 2016 16:19:37 -0400
Subject: [PATCH 6/6] changes beforeDraw to beforeDatasetsDraw

---
 src/chart.annotation.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/chart.annotation.js b/src/chart.annotation.js
index a571784c2..161581cd4 100644
--- a/src/chart.annotation.js
+++ b/src/chart.annotation.js
@@ -64,7 +64,7 @@ var AnnotationPlugin = Chart.PluginBase.extend({
 		}
 	},
 
-	beforeDraw: function(chartInstance, easingDecimal) {
+	beforeDatasetsDraw: function(chartInstance, easingDecimal) {
 		// If we have annotations, draw them
 		var annotationObjects = chartInstance._annotationObjects;
         var annotationOpts = chartInstance.options.annotation;