Better label positioning (#31)

Labels should track with the line slope, and should not fall out of the edge of the canvas.

Author: compwright

README.md

@@ -65,28 +65,44 @@ Vertical or horizontal lines are supported.
 	label: {
 		// Background color of label, default below
 		backgroundColor: 'rgba(0,0,0,0.8)',
+
 		// Font family of text, inherits from global
 		fontFamily: "sans-serif",
+
 		// Font size of text, inherits from global
 		fontSize: 12,
+
 		// Font style of text, default below
 		fontStyle: "bold",
+
 		// Font color of text, default below
 		fontColor: "#fff",
+
 		// Padding of label to add left/right, default below
 		xPadding: 6,
+
 		// Padding of label to add top/bottom, default below
 		yPadding: 6,
+
 		// Radius of label rectangle, default below
 		cornerRadius: 6,
+
 		// Anchor position of label on line, can be one of: top, bottom, left, right, center. Default below.
 		position: "center",
+
 		// Adjustment along x-axis (left-right) of label relative to above number (can be negative)
+		// For horizontal lines positioned left or right, negative values move
+		// the label toward the edge, and negative values toward the center.
 		xAdjust: 0,
+
 		// Adjustment along y-axis (top-bottom) of label relative to above number (can be negative)
+		// For vertical lines positioned top or bottom, negative values move
+		// the label toward the edge, and negative values toward the center.
 		yAdjust: 0,
+
 		// Whether the label is enabled and should be displayed
 		enabled: false,
+
 		// Text to display in label - default is null
 		content: "Test label"
 	}

chartjs-plugin-annotation.js

@@ -250,8 +250,8 @@ module.exports = function(Chart) {
 				// Draw the tooltip
 				helpers.drawRoundedRectangle(
 					ctx,
-					view.labelX - view.labelXPadding, // x
-					view.labelY - view.labelYPadding, // y
+					view.labelX, // x
+					view.labelY, // y
 					view.labelWidth, // width
 					view.labelHeight, // height
 					view.labelCornerRadius // radius
@@ -265,12 +265,12 @@ module.exports = function(Chart) {
 					view.labelFontFamily
 				);
 				ctx.fillStyle = view.labelFontColor;
-				ctx.textAlign = 'left';
-				ctx.textBaseline = 'top';
+				ctx.textAlign = 'center';
+				ctx.textBaseline = 'middle';
 				ctx.fillText(
 					view.labelContent,
-					view.labelX,
-					view.labelY
+					view.labelX + (view.labelWidth / 2),
+					view.labelY + (view.labelHeight / 2)
 				);
 			}
 		}
@@ -280,27 +280,62 @@ module.exports = function(Chart) {
 		return !isNaN(num) && isFinite(num);
 	}
 
-	function calculateLabelPosition(view, width, height) {
-		var ret = {
-			x: ((view.x1 + view.x2 - width) / 2),
-			y: ((view.y1 + view.y2 - height) / 2)
+	function calculateLabelPosition(view, width, height, padWidth, padHeight) {
+		// Describe the line in slope-intercept form (y = mx + b).
+		// Note that the axes are rotated 90° CCW, which causes the
+		// x- and y-axes to be swapped.
+		var m = (view.x2 - view.x1) / (view.y2 - view.y1);
+		var b = view.x1 || 0;
+
+		var fy = function(y) {
+			// Coordinates are relative to the origin of the canvas
+			return m * (y - view.y1) + b;
+		};
+		var fx = function(x) {
+			return ((x - b) / m) + view.y1;
 		};
-		switch (view.labelPosition) {
-		case "top":
-			ret.y = view.y1 > view.y2 ? view.y2 : view.y1;
+
+		var ret = {}, xa = 0, ya = 0;
+
+		switch (true) {
+			// top align
+			case view.mode == verticalKeyword && view.labelPosition == "top":
+				ya = padHeight + view.labelYAdjust;
+				xa = (width / 2) + view.labelXAdjust;
+				ret.y = view.y1 + ya;
+				ret.x = (isFinite(m) ? fy(ret.y) : view.x1) - xa;
 			break;
-		case "left":
-			ret.x = view.x1 > view.x2 ? view.x1 : view.x2;
+			
+			// bottom align
+			case view.mode == verticalKeyword && view.labelPosition == "bottom":
+				ya = height + padHeight + view.labelYAdjust;
+				xa = (width / 2) + view.labelXAdjust;
+				ret.y = view.y2 - ya;
+				ret.x = (isFinite(m) ? fy(ret.y) : view.x1) - xa;
 			break;
-		case "bottom":
-			ret.y = view.y1 > view.y2 ? view.y1 : view.y2;
+			
+			// left align
+			case view.mode == horizontalKeyword && view.labelPosition == "left":
+				xa = padWidth + view.labelXAdjust;
+				ya = -(height / 2) + view.labelYAdjust;
+				ret.x = view.x1 + xa;
+				ret.y = fx(ret.x) + ya;
 			break;
-		case "right":
-			ret.x = view.x1 > view.x2 ? view.x2 : view.x1;
+			
+			// right align
+			case view.mode == horizontalKeyword && view.labelPosition == "right":
+				xa = width + padWidth + view.labelXAdjust;
+				ya = -(height / 2) + view.labelYAdjust;
+				ret.x = view.x2 - xa;
+				ret.y = fx(ret.x) + ya;
 			break;
+
+			// center align
+			default:
+				ret.x = ((view.x1 + view.x2 - width) / 2) + view.labelXAdjust;
+				ret.y = ((view.y1 + view.y2 - height) / 2) + view.labelYAdjust;
 		}
-		ret.x += view.labelXAdjust;
-		ret.y += view.labelYAdjust;
+
 		return ret;
 	}
 
@@ -329,6 +364,8 @@ module.exports = function(Chart) {
 			}
 		}
 
+		model.mode = options.mode;
+
 		// Figure out the label:
 		model.labelBackgroundColor = options.label.backgroundColor;
 		model.labelFontFamily = options.label.fontFamily;
@@ -344,21 +381,14 @@ module.exports = function(Chart) {
 		model.labelEnabled = options.label.enabled;
 		model.labelContent = options.label.content;
 
-		ctx.font = helpers.fontString(
-			model.labelFontSize,
-			model.labelFontStyle,
-			model.labelFontFamily
-		);
-		var text = ctx.measureText(model.labelContent);
-		var position = calculateLabelPosition(
-			model,
-			text.width,
-			model.labelFontSize
-		);
-		model.labelX = position.x;
-		model.labelY = position.y;
-		model.labelWidth = text.width + (2 * model.labelXPadding);
-		model.labelHeight = model.labelFontSize + (2 * model.labelYPadding)
+		ctx.font = helpers.fontString(model.labelFontSize, model.labelFontStyle, model.labelFontFamily);
+		var textWidth = ctx.measureText(model.labelContent).width;
+		var textHeight = ctx.measureText('M').width;
+		var labelPosition = calculateLabelPosition(model, textWidth, textHeight, model.labelXPadding, model.labelYPadding);
+		model.labelX = labelPosition.x - model.labelXPadding;
+		model.labelY = labelPosition.y - model.labelYPadding;
+		model.labelWidth = textWidth + (2 * model.labelXPadding);
+		model.labelHeight = textHeight + (2 * model.labelYPadding);
 
 		model.borderColor = options.borderColor;
 		model.borderWidth = options.borderWidth;

chartjs-plugin-annotation.min.js

@@ -132,10 +132,10 @@
                             mode: 'horizontal',
                             scaleID: 'y-axis-1',
                             value: 25,
-                            endValue: 45,
                             borderColor: 'black',
                             borderWidth: 5,
                             label: {
+                                yAdjust: -20,
                                 backgroundColor: "red",
                                 content: "This is a long test label",
                                 enabled: true
@@ -146,11 +146,12 @@
                             mode: 'vertical',
                             scaleID: 'x-axis-1',
                             value: 25,
+                            endValue: 45,
                             borderColor: 'red',
                             borderWidth: 5,
                             label: {
-                                position: "top",
-                                yAdjust: 15,
+                                position: "bottom",
+                                yAdjust: 100,
                                 content: "This is a another test label",
                                 enabled: true
                             }