From: Evert Timberg <evert.timberg+github@gmail.com>
Date: Sun, 4 Jun 2017 17:34:05 +0000 (-0400)
Subject: Fix vertical alignment of legend labels (#4318)
X-Git-Tag: v2.7.0~1^2~98
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=a9308301e34d3fb39462a8ed24e0fd09c7f388ef;p=thirdparty%2FChart.js.git

Fix vertical alignment of legend labels (#4318)

Ensure that disabled legend style is drawn in the center of the text and that the text is correctly centered in the box.
---

diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js
index cd52b1f9a..3d898ad3f 100644
--- a/src/plugins/plugin.legend.js
+++ b/src/plugins/plugin.legend.js
@@ -320,7 +320,7 @@ module.exports = function(Chart) {
 
 				// Canvas setup
 				ctx.textAlign = 'left';
-				ctx.textBaseline = 'top';
+				ctx.textBaseline = 'middle';
 				ctx.lineWidth = 0.5;
 				ctx.strokeStyle = fontColor; // for strikethrough effect
 				ctx.fillStyle = fontColor; // render in correct colour
@@ -372,14 +372,18 @@ module.exports = function(Chart) {
 					ctx.restore();
 				};
 				var fillText = function(x, y, legendItem, textWidth) {
-					ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);
+					var halfFontSize = fontSize / 2;
+					var xLeft = boxWidth + halfFontSize + x;
+					var yMiddle = y + halfFontSize;
+
+					ctx.fillText(legendItem.text, xLeft, yMiddle);
 
 					if (legendItem.hidden) {
 						// Strikethrough the text if hidden
 						ctx.beginPath();
 						ctx.lineWidth = 2;
-						ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));
-						ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
+						ctx.moveTo(xLeft, yMiddle);
+						ctx.lineTo(xLeft + textWidth, yMiddle);
 						ctx.stroke();
 					}
 				};