Remove gaps on the left and right when the axis offset is true (#5884)

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index e3a7979440c032d67a41f3b5ad68e0f1a70d932f..8f7df0021620c7057a2e836250a30466e15b2c2e 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -397,6 +397,7 @@ module.exports = Element.extend({
                var scaleLabelOpts = opts.scaleLabel;
                var gridLineOpts = opts.gridLines;
                var display = opts.display;
+               var position = opts.position;
                var isHorizontal = me.isHorizontal();
 
                var tickFont = parseFontOptions(tickOpts);
@@ -456,16 +457,21 @@ module.exports = Element.extend({
                                me.ctx.font = tickFont.font;
                                var firstLabelWidth = computeTextSize(me.ctx, labels[0], tickFont.font);
                                var lastLabelWidth = computeTextSize(me.ctx, labels[labels.length - 1], tickFont.font);
+                               var offsetLeft = me.getPixelForTick(0) - me.left;
+                               var offsetRight = me.right - me.getPixelForTick(labels.length - 1);
+                               var paddingLeft, paddingRight;
 
                                // Ensure that our ticks are always inside the canvas. When rotated, ticks are right aligned
                                // which means that the right padding is dominated by the font height
                                if (me.labelRotation !== 0) {
-                                       me.paddingLeft = opts.position === 'bottom' ? (cosRotation * firstLabelWidth) + 3 : (cosRotation * lineSpace) + 3; // add 3 px to move away from canvas edges
-                                       me.paddingRight = opts.position === 'bottom' ? (cosRotation * lineSpace) + 3 : (cosRotation * lastLabelWidth) + 3;
+                                       paddingLeft = position === 'bottom' ? (cosRotation * firstLabelWidth) : (cosRotation * lineSpace);
+                                       paddingRight = position === 'bottom' ? (cosRotation * lineSpace) : (cosRotation * lastLabelWidth);
                                } else {
-                                       me.paddingLeft = firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
-                                       me.paddingRight = lastLabelWidth / 2 + 3;
+                                       paddingLeft = firstLabelWidth / 2;
+                                       paddingRight = lastLabelWidth / 2;
                                }
+                               me.paddingLeft = Math.max(paddingLeft - offsetLeft, 0) + 3; // add 3 px to move away from canvas edges
+                               me.paddingRight = Math.max(paddingRight - offsetRight, 0) + 3;
                        } else {
                                // A vertical axis is more constrained by the width. Labels are the
                                // dominant factor here, so get that length first and account for padding

diff --git a/test/specs/scale.category.tests.js b/test/specs/scale.category.tests.js
index 1665235ae8d636c2206c678a1780808ba2115f5a..b4e8b08d04492c20052b0ae2bd4d244d0b81625b 100644 (file)
--- a/test/specs/scale.category.tests.js
+++ b/test/specs/scale.category.tests.js
@@ -220,11 +220,11 @@ describe('Category scale tests', function() {
                xScale.options.offset = true;
                chart.update();
 
-               expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(69 + 6); // plus lineHeight
+               expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(71 + 6); // plus lineHeight
                expect(xScale.getValueForPixel(69)).toBe(0);
 
-               expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(441);
-               expect(xScale.getValueForPixel(397)).toBe(4);
+               expect(xScale.getPixelForValue(0, 4, 0)).toBeCloseToPixel(461);
+               expect(xScale.getValueForPixel(417)).toBe(4);
        });
 
        it ('Should get the correct pixel for a value when there are repeated labels', function() {
@@ -295,8 +295,8 @@ describe('Category scale tests', function() {
                xScale.options.offset = true;
                chart.update();
 
-               expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(102 + 6); // plus lineHeight
-               expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(417);
+               expect(xScale.getPixelForValue(0, 1, 0)).toBeCloseToPixel(103 + 6); // plus lineHeight
+               expect(xScale.getPixelForValue(0, 3, 0)).toBeCloseToPixel(429);
        });
 
        it ('should get the correct pixel for a value when vertical', function() {