diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 2c6870b279d..0f9b1af44c6 100644 --- a/src/plugins/plugin.legend.js +++ b/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);