fix(legend): draw last item when align is end (#12345)

src/plugins/plugin.legend.js

@@ -281,7 +281,7 @@ export class Legend extends Element {
 	 * @private
 	 */
   _draw() {
-    const {options: opts, columnSizes, lineWidths, ctx} = this;
+    const {options: opts, columnSizes, lineWidths, ctx, legendHitBoxes: hitboxes} = this;
     const {align, labels: labelOpts} = opts;
     const defaultColor = defaults.color;
     const rtlHelper = getRtlAdapter(opts.rtl, this.left, this.width);
@@ -404,14 +404,14 @@ export class Legend extends Element {
       rtlHelper.setWidth(this.width);
 
       if (isHorizontal) {
-        if (i > 0 && x + width + padding > this.right) {
+        if (i > 0 && (hitboxes && hitboxes[i] ? hitboxes[i].row !== cursor.line : x + width + padding > this.right + 1e-6)) {
           y = cursor.y += lineHeight;
-          cursor.line++;
+          cursor.line = (hitboxes && hitboxes[i]) ? hitboxes[i].row : cursor.line + 1;
           x = cursor.x = _alignStartEnd(align, this.left + padding, this.right - lineWidths[cursor.line]);
         }
-      } else if (i > 0 && y + lineHeight > this.bottom) {
+      } else if (i > 0 && (hitboxes && hitboxes[i] ? hitboxes[i].col !== cursor.line : y + lineHeight > this.bottom + 1e-6)) {
         x = cursor.x = x + columnSizes[cursor.line].width + padding;
-        cursor.line++;
+        cursor.line = (hitboxes && hitboxes[i]) ? hitboxes[i].col : cursor.line + 1;
         y = cursor.y = _alignStartEnd(align, this.top + titleHeight + padding, this.bottom - columnSizes[cursor.line].height);
       }
 

test/specs/plugin.legend.tests.js

@@ -1181,5 +1181,64 @@ describe('Legend block tests', function() {
       await jasmine.triggerMouseEvent(chart, 'click', el);
       expect(clickItem).toBe(chart.legend.legendItems[0]);
     });
+
+    it('should draw the last item when horizontal legend has align end and label widths cause floating point rounding', function() {
+      var origMeasureText = CanvasRenderingContext2D.prototype.measureText;
+      var origFillText = CanvasRenderingContext2D.prototype.fillText;
+      var drawn = [];
+      var widths = {Alpha: 40.2, Beta: 30.2};
+
+      CanvasRenderingContext2D.prototype.measureText = function(text) {
+        return text in widths ? {width: widths[text]} : origMeasureText.call(this, text);
+      };
+      CanvasRenderingContext2D.prototype.fillText = function(text, x, y) {
+        if (text in widths) {
+          drawn.push({text: text, x: x, y: y});
+        }
+        return origFillText.apply(this, arguments);
+      };
+
+      try {
+        acquireChart({
+          type: 'bar',
+          data: {
+            labels: ['a', 'b'],
+            datasets: [
+              {label: 'Alpha', data: [1, 2]},
+              {label: 'Beta', data: [2, 1]},
+            ]
+          },
+          options: {
+            responsive: false,
+            animation: false,
+            plugins: {
+              legend: {
+                align: 'end',
+                labels: {
+                  boxWidth: 12,
+                  padding: 10,
+                  font: {size: 12}
+                }
+              }
+            }
+          }
+        }, {
+          canvas: {
+            width: 600,
+            height: 200
+          }
+        });
+
+        expect(drawn.length).toBe(2);
+        expect(drawn[0].text).toBe('Alpha');
+        expect(isNaN(drawn[0].x)).toBeFalse();
+        expect(drawn[1].text).toBe('Beta');
+        expect(isNaN(drawn[1].x)).toBeFalse();
+      } finally {
+        CanvasRenderingContext2D.prototype.measureText = origMeasureText;
+        CanvasRenderingContext2D.prototype.fillText = origFillText;
+      }
+    });
   });
 });
+