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

Author: nagix

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

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() {