Fix the legend drawing when `labels.usePointStyle` is true (#3323)

diff --git a/src/core/core.legend.js b/src/core/core.legend.js
index e82c06ea3ed23b592488b0b9d98eb5d4617dc0e5..3afbabcf3e6d3e6af9caaa8fcf96773f34882485 100644 (file)
--- a/src/core/core.legend.js
+++ b/src/core/core.legend.js
@@ -64,6 +64,18 @@ module.exports = function(Chart) {
                }
        };
 
+       /**
+        * Helper function to get the box width based on the usePointStyle option
+        * @param labelopts {Object} the label options on the legend
+        * @param fontSize {Number} the label font size
+        * @return {Number} width of the color box area
+        */
+       function getBoxWidth(labelOpts, fontSize) {
+               return labelOpts.usePointStyle ?
+                       fontSize * Math.SQRT2 :
+                       labelOpts.boxWidth;
+       }
+
        Chart.Legend = Chart.Element.extend({
 
                initialize: function(config) {
@@ -204,11 +216,9 @@ module.exports = function(Chart) {
                                        ctx.textBaseline = 'top';
 
                                        helpers.each(me.legendItems, function(legendItem, i) {
-                                               var boxWidth = labelOpts.usePointStyle ?
-                                                       fontSize * Math.sqrt(2) :
-                                                       labelOpts.boxWidth;
-
+                                               var boxWidth = getBoxWidth(labelOpts, fontSize);
                                                var width = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
+
                                                if (lineWidths[lineWidths.length - 1] + width + labelOpts.padding >= me.width) {
                                                        totalHeight += fontSize + (labelOpts.padding);
                                                        lineWidths[lineWidths.length] = me.left;
@@ -236,10 +246,7 @@ module.exports = function(Chart) {
                                        var itemHeight = fontSize + vPadding;
 
                                        helpers.each(me.legendItems, function(legendItem, i) {
-                                               // If usePointStyle is set, multiple boxWidth by 2 since it represents
-                                               // the radius and not truly the width
-                                               var boxWidth = labelOpts.usePointStyle ? 2 * labelOpts.boxWidth : labelOpts.boxWidth;
-
+                                               var boxWidth = getBoxWidth(labelOpts, fontSize);
                                                var itemWidth = boxWidth + (fontSize / 2) + ctx.measureText(legendItem.text).width;
 
                                                // If too tall, go to new column
@@ -308,7 +315,7 @@ module.exports = function(Chart) {
                                ctx.fillStyle = fontColor; // render in correct colour
                                ctx.font = labelFont;
 
-                               var boxWidth = labelOpts.boxWidth,
+                               var boxWidth = getBoxWidth(labelOpts, fontSize),
                                        hitboxes = me.legendHitBoxes;
 
                                // current position
@@ -385,9 +392,7 @@ module.exports = function(Chart) {
                                var itemHeight = fontSize + labelOpts.padding;
                                helpers.each(me.legendItems, function(legendItem, i) {
                                        var textWidth = ctx.measureText(legendItem.text).width,
-                                               width = labelOpts.usePointStyle ?
-                                                       fontSize + (fontSize / 2) + textWidth :
-                                                       boxWidth + (fontSize / 2) + textWidth,
+                                               width = boxWidth + (fontSize / 2) + textWidth,
                                                x = cursor.x,
                                                y = cursor.y;