Fixes Issue chartjs#3175: New config parameter options.legened.align,…

… for controlling alignment of legend blocks in horizontal/vertical legends.

Maintains backward compatibility for legends positioned on the left/right by defaulting to 'start'.

src/plugins/plugin.legend.js

@@ -104,6 +104,10 @@ var Legend = Element.extend({
 	initialize: function(config) {
 		helpers.extend(this, config);
 
+		if (!this.options.align) {
+			// to maintain compatibility with existing default
+			this.options.align = this.isHorizontal() ? 'center' : 'start';
+		}
 		// Contains hit boxes for each dataset (in dataset order)
 		this.legendHitBoxes = [];
 
@@ -274,6 +278,7 @@ var Legend = Element.extend({
 			} else {
 				var vPadding = labelOpts.padding;
 				var columnWidths = me.columnWidths = [];
+				var columnHeights = [];
 				var totalWidth = labelOpts.padding;
 				var currentColWidth = 0;
 				var currentColHeight = 0;
@@ -287,7 +292,7 @@ var Legend = Element.extend({
 					if (i > 0 && currentColHeight + itemHeight > minSize.height - vPadding) {
 						totalWidth += currentColWidth + labelOpts.padding;
 						columnWidths.push(currentColWidth); // previous column width
-
+						columnHeights.push(currentColHeight);
 						currentColWidth = 0;
 						currentColHeight = 0;
 					}
@@ -307,7 +312,9 @@ var Legend = Element.extend({
 
 				totalWidth += currentColWidth;
 				columnWidths.push(currentColWidth);
+				columnHeights.push(currentColHeight);
 				minSize.width += totalWidth;
+				me._columnHeights = columnHeights;
 			}
 		}
 
@@ -329,6 +336,8 @@ var Legend = Element.extend({
 		var globalDefaults = defaults.global;
 		var defaultColor = globalDefaults.defaultColor;
 		var lineDefault = globalDefaults.elements.line;
+		var legendHeight = me.height;
+		var columnHeights = me._columnHeights;
 		var legendWidth = me.width;
 		var lineWidths = me.lineWidths;
 
@@ -408,18 +417,29 @@ var Legend = Element.extend({
 				}
 			};
 
+			var alignmentOffset = function(dimension, legendBlocks, blockIndex) {
+				if (opts.align === 'start') {
+					return labelOpts.padding;
+				} else if (opts.align === 'end') {
+					return dimension - legendBlocks[blockIndex] - labelOpts.padding;
+				}
+				// default to center
+				return (dimension - legendBlocks[blockIndex] - labelOpts.padding) / 2;
+			}
+
 			// Horizontal
 			var isHorizontal = me.isHorizontal();
+			var offset = isHorizontal ? alignmentOffset(legendWidth, lineWidths, 0) : alignmentOffset(legendHeight, columnHeights, 0)
 			if (isHorizontal) {
 				cursor = {
-					x: me.left + ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding,
+					x: me.left + offset,
 					y: me.top + labelOpts.padding,
 					line: 0
 				};
 			} else {
 				cursor = {
 					x: me.left + labelOpts.padding,
-					y: me.top + labelOpts.padding,
+					y: me.top + offset,
 					line: 0
 				};
 			}
@@ -438,12 +458,14 @@ var Legend = Element.extend({
 					if (i > 0 && x + width + labelOpts.padding > me.left + me.minSize.width) {
 						y = cursor.y += itemHeight;
 						cursor.line++;
-						x = cursor.x = me.left + ((legendWidth - lineWidths[cursor.line]) / 2) + labelOpts.padding;
+						var newlineOffset = alignmentOffset(legendWidth, lineWidths, cursor.line);
+						x = cursor.x = me.left + newlineOffset;
 					}
 				} else if (i > 0 && y + itemHeight > me.top + me.minSize.height) {
-					x = cursor.x = x + me.columnWidths[cursor.line] + labelOpts.padding;
-					y = cursor.y = me.top + labelOpts.padding;
 					cursor.line++;
+					x = cursor.x = x + me.columnWidths[cursor.line] + labelOpts.padding;
+					var newColumnOffset = alignmentOffset(legendHeight, columnHeights, cursor.line);
+					y = cursor.y = me.top + newColumnOffset;
 				}
 
 				drawLegendBox(x, y, legendItem);