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 cd52b1f9aee72355fb8118445b66213070e99da7..3d898ad3f14c2858ddbce62c48b19a06e0d03625 100644 (file)
--- 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();
                                        }
                                };