From 37edd1d7eaaf3faaf4562c35fb649c21413db305 Mon Sep 17 00:00:00 2001
From: soniiic <soniiic@outlook.com>
Date: Wed, 25 Oct 2017 15:40:13 +0100
Subject: [PATCH 1/3] Add option to allow square legend symbols at different
 sizes

If the useSquareBox option is set to true, the height is set to the same as the boxWidth option. It places it vertically central to the label. It also ensures the legend symbol never exceeds the size of the font size.
---
 src/plugins/plugin.legend.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 71e0e4110e4..f8dec559bfd 100644
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -91,6 +91,10 @@ module.exports = function(Chart) {
 	 * @return {Number} width of the color box area
 	 */
 	function getBoxWidth(labelOpts, fontSize) {
+		if (labelOpts.useSquareBox) {
+			return Math.min(fontSize, labelOpts.boxWidth);
+		}
+		
 		return labelOpts.usePointStyle ?
 			fontSize * Math.SQRT2 :
 			labelOpts.boxWidth;
@@ -381,11 +385,18 @@ module.exports = function(Chart) {
 						// Draw pointStyle as legend symbol
 						helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
 					} else {
+						var boxHeight = fontSize;
+
+						if (opts.labels.useSquareBox) {
+							boxHeight = boxWidth;
+							y += (fontSize - boxHeight) / 2;
+						}
+						
 						// Draw box as legend symbol
 						if (!isLineWidthZero) {
-							ctx.strokeRect(x, y, boxWidth, fontSize);
+							ctx.strokeRect(x, y, boxWidth, boxHeight);
 						}
-						ctx.fillRect(x, y, boxWidth, fontSize);
+						ctx.fillRect(x, y, boxWidth, boxHeight);
 					}
 
 					ctx.restore();

From e1f7cf47fe7ebb1b92f803e09356e8382d14e93d Mon Sep 17 00:00:00 2001
From: soniiic <soniiic@outlook.com>
Date: Wed, 25 Oct 2017 15:46:33 +0100
Subject: [PATCH 2/3] remove trailing spaces

---
 src/plugins/plugin.legend.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index f8dec559bfd..2e1e1c8fe9b 100644
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -94,7 +94,7 @@ module.exports = function(Chart) {
 		if (labelOpts.useSquareBox) {
 			return Math.min(fontSize, labelOpts.boxWidth);
 		}
-		
+
 		return labelOpts.usePointStyle ?
 			fontSize * Math.SQRT2 :
 			labelOpts.boxWidth;
@@ -391,7 +391,7 @@ module.exports = function(Chart) {
 							boxHeight = boxWidth;
 							y += (fontSize - boxHeight) / 2;
 						}
-						
+
 						// Draw box as legend symbol
 						if (!isLineWidthZero) {
 							ctx.strokeRect(x, y, boxWidth, boxHeight);

From 219808f7b0ed323ad5bc07835dfe6a92d4114bc5 Mon Sep 17 00:00:00 2001
From: soniiic <soniiic@outlook.com>
Date: Thu, 26 Oct 2017 09:19:24 +0100
Subject: [PATCH 3/3] Update to use boxHeight instead

---
 src/plugins/plugin.legend.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index 2e1e1c8fe9b..42630e0dc7f 100644
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -91,15 +91,17 @@ module.exports = function(Chart) {
 	 * @return {Number} width of the color box area
 	 */
 	function getBoxWidth(labelOpts, fontSize) {
-		if (labelOpts.useSquareBox) {
-			return Math.min(fontSize, labelOpts.boxWidth);
-		}
-
 		return labelOpts.usePointStyle ?
 			fontSize * Math.SQRT2 :
 			labelOpts.boxWidth;
 	}
 
+	function getBoxHeight(labelOpts, fontSize) {
+		return labelOpts.boxHeight ?
+			labelOpts.boxHeight :
+			fontSize;
+	}
+
 	Chart.Legend = Element.extend({
 
 		initialize: function(config) {
@@ -350,6 +352,7 @@ module.exports = function(Chart) {
 				ctx.font = labelFont;
 
 				var boxWidth = getBoxWidth(labelOpts, fontSize);
+				var boxHeight = getBoxHeight(labelOpts, fontSize);
 				var hitboxes = me.legendHitBoxes;
 
 				// current position
@@ -385,12 +388,7 @@ module.exports = function(Chart) {
 						// Draw pointStyle as legend symbol
 						helpers.canvas.drawPoint(ctx, legendItem.pointStyle, radius, centerX, centerY);
 					} else {
-						var boxHeight = fontSize;
-
-						if (opts.labels.useSquareBox) {
-							boxHeight = boxWidth;
-							y += (fontSize - boxHeight) / 2;
-						}
+						y += (fontSize - boxHeight) / 2;
 
 						// Draw box as legend symbol
 						if (!isLineWidthZero) {