Added tooltip label to line chart (#31)

* Added tooltip label to line chart

Originally based on #12.
Added an optional Label option to Line Annotation.
Updated the documentation to display this. Also added a sample showing
how it can work.

* Fixed calculations as per comments

Moved rendering calculations to lineUpdate function, also fixed a minor
reference bug that prevented animations from working at all.

* Fixed font bug introduced by last commit

* Fixed sample post-update

Author: petewalker

README.md

@@ -60,7 +60,36 @@ Vertical or horizontal lines are supported.
 
 	// Line Dash Offset
 	// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
-	borderDashOffset: 5
+	borderDashOffset: 5,
+
+	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)
+		xAdjust: 0,
+		// Adjustment along y-axis (top-bottom) of label relative to above number (can be negative)
+		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

@@ -139,12 +139,27 @@ var annotationPlugin = {
 	beforeInit: function(chartInstance) {
 		var options = chartInstance.options;
 		options.annotation = helpers.configMerge(Chart.Annotation.defaults, options.annotation);
-
+		var defaultLabelOptions = {
+			backgroundColor: 'rgba(0,0,0,0.8)',
+			fontFamily: options.defaultFontFamily,
+			fontSize: options.defaultFontSize,
+			fontStyle: "bold",
+			fontColor: "#fff",
+			xPadding: 6,
+			yPadding: 6,
+			cornerRadius: 6,
+			position: "center",
+			xAdjust: 0,
+			yAdjust: 0,
+			enabled: false,
+			content: null
+		};
 		var annotationConfigs = options.annotation.annotations;
 		if (isArray(annotationConfigs)) {
 			var annotationObjects = chartInstance._annotationObjects = [];
 
 			annotationConfigs.forEach(function(configuration, i) {
+				configuration.label = helpers.configMerge(defaultLabelOptions, configuration.label);
 				var Constructor = annotationTypes[configuration.type];
 				if (Constructor) {
 					annotationObjects.push(new Constructor({
@@ -198,6 +213,11 @@ module.exports = annotationPlugin;
 Chart.pluginService.register(annotationPlugin);
 
 },{"./box.js":2,"./line.js":4,"chart.js":1}],4:[function(require,module,exports){
+// Get the chart variable
+var Chart = require('chart.js');
+Chart = typeof(Chart) === 'function' ? Chart : window.Chart;
+var helpers = Chart.helpers;
+
 // Line Annotation implementation
 module.exports = function(Chart) {
 	var horizontalKeyword = 'horizontal';
@@ -224,22 +244,76 @@ module.exports = function(Chart) {
 			ctx.lineTo(view.x2, view.y2);
 			ctx.stroke();
 			ctx.restore();
+
+			if (view.labelEnabled && view.labelContent) {
+				ctx.fillStyle = view.labelBackgroundColor;
+				// Draw the tooltip
+				helpers.drawRoundedRectangle(
+					ctx,
+					view.labelX - view.labelXPadding, // x
+					view.labelY - view.labelYPadding, // y
+					view.labelWidth, // width
+					view.labelHeight, // height
+					view.labelCornerRadius // radius
+				);
+				ctx.fill();
+
+				// Draw the text
+				ctx.font = helpers.fontString(
+					view.labelFontSize,
+					view.labelFontStyle,
+					view.labelFontFamily
+				);
+				ctx.fillStyle = view.labelFontColor;
+				ctx.textAlign = 'left';
+				ctx.textBaseline = 'top';
+				ctx.fillText(
+					view.labelContent,
+					view.labelX,
+					view.labelY
+				);
+			}
 		}
 	});
 
 	function isValid(num) {
 		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)
+		};
+		switch (view.labelPosition) {
+		case "top":
+			ret.y = view.y1 > view.y2 ? view.y2 : view.y1;
+			break;
+		case "left":
+			ret.x = view.x1 > view.x2 ? view.x1 : view.x2;
+			break;
+		case "bottom":
+			ret.y = view.y1 > view.y2 ? view.y1 : view.y2;
+			break;
+		case "right":
+			ret.x = view.x1 > view.x2 ? view.x2 : view.x1;
+			break;
+		}
+		ret.x += view.labelXAdjust;
+		ret.y += view.labelYAdjust;
+		return ret;
+	}
+
 	function lineUpdate(obj, options, chartInstance) {
-		var model = obj._model = obj._model || {};
+		var model = obj._model = helpers.clone(obj._model) || {};
 
 		var scale = chartInstance.scales[options.scaleID];
 		var pixel = scale ? scale.getPixelForValue(options.value) : NaN;
 		var endPixel = scale && isValid(options.endValue) ? scale.getPixelForValue(options.endValue) : NaN;
 		if (isNaN(endPixel))
 		    endPixel = pixel;
 		var chartArea = chartInstance.chartArea;
+		var ctx = chartInstance.chart.ctx;
 
 		if (!isNaN(pixel)) {
 			if (options.mode == horizontalKeyword) {
@@ -255,6 +329,37 @@ module.exports = function(Chart) {
 			}
 		}
 
+		// Figure out the label:
+		model.labelBackgroundColor = options.label.backgroundColor;
+		model.labelFontFamily = options.label.fontFamily;
+		model.labelFontSize = options.label.fontSize;
+		model.labelFontStyle = options.label.fontStyle;
+		model.labelFontColor = options.label.fontColor;
+		model.labelXPadding = options.label.xPadding;
+		model.labelYPadding = options.label.yPadding;
+		model.labelCornerRadius = options.label.cornerRadius;
+		model.labelPosition = options.label.position;
+		model.labelXAdjust = options.label.xAdjust;
+		model.labelYAdjust = options.label.yAdjust;
+		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)
+
 		model.borderColor = options.borderColor;
 		model.borderWidth = options.borderWidth;
 		model.borderDash = options.borderDash || [];
@@ -268,4 +373,4 @@ module.exports = function(Chart) {
 	};
 };
 
-},{}]},{},[3]);
+},{"chart.js":1}]},{},[3]);