Update plugin.legend.js with a new option: 'alignment'. This allows t…

…he legend to be aligned within its layout box. In the case of

position top or bottom the legend can be aligned 'left', 'right', or 'center' (default) and in the case of position right or left
the legend can be aligned 'top' (default), 'center', or 'bottom'.
Updated the legend help page to reflect these changes.

docs/configuration/legend.md

@@ -9,6 +9,7 @@ The legend configuration is passed into the `options.legend` namespace. The glob
 | -----| ---- | --------| -----------
 | `display` | `Boolean` | `true` | Is the legend shown?
 | `position` | `String` | `'top'` | Position of the legend. [more...](#position)
+| `alignment`    | `String` | `'center'` | The alignment of the legend. [more...](#align)
 | `fullWidth` | `Boolean` | `true` | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use.
 | `onClick` | `Function` | | A callback that is called when a click event is registered on a label item.
 | `onHover` | `Function` | | A callback that is called when a 'mousemove' event is registered on top of a label item.
@@ -22,6 +23,19 @@ Position of the legend. Options are:
 * `'bottom'`
 * `'right'`
 
+## Align
+The alignment of the legend.  The options depend on the position of the legend.  
+
+For positions `'top'` or `'bottom'`
+* `'left'`
+* `'center'` (default)
+* `'right'`
+
+For positions `'left'` or `'right'`
+* `'top'` (default)
+* `'center'` 
+* `'bottom'`
+
 ## Legend Label Configuration
 
 The legend label configuration is nested below the legend configuration using the `labels` key.

src/plugins/plugin.legend.js

@@ -11,6 +11,7 @@ defaults._set('global', {
 	legend: {
 		display: true,
 		position: 'top',
+		alignment: 'center',
 		fullWidth: true,
 		reverse: false,
 		weight: 1000,
@@ -411,15 +412,30 @@ var Legend = Element.extend({
 			// Horizontal
 			var isHorizontal = me.isHorizontal();
 			if (isHorizontal) {
+				// default to center as this is the original behaviour of just position
+				var alignedX = ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding;
+				if (opts.alignment === 'left') {
+					alignedX = 0;
+				} else if (opts.alignment === 'right') {
+					alignedX = ((legendWidth - lineWidths[0])) + labelOpts.padding;
+				}
 				cursor = {
-					x: me.left + ((legendWidth - lineWidths[0]) / 2) + labelOpts.padding,
+					x: me.left + alignedX,
 					y: me.top + labelOpts.padding,
 					line: 0
 				};
 			} else {
+				// default to top as this is the original behaviour of just position
+				var alignedY = me.top + labelOpts.padding;
+				var legendHeight = (fontSize + labelOpts.padding) * me.legendItems.length;
+				if (opts.alignment === 'bottom') {
+					alignedY = ((me.height - legendHeight));
+				} else if (opts.alignment === 'center') {
+					alignedY = (((me.height - legendHeight) / 2)) + labelOpts.padding;
+				}
 				cursor = {
 					x: me.left + labelOpts.padding,
-					y: me.top + labelOpts.padding,
+					y: alignedY,
 					line: 0
 				};
 			}