When an axis needs padding due to a long, rotated, label it should be added inside...

diff --git a/src/core/core.layoutService.js b/src/core/core.layoutService.js
index 220a253448464eee0266b547f9ac442f0b2c7be3..2afdedfa395cd0ff27ed4983f2a173c4a12a4d2b 100644 (file)
--- a/src/core/core.layoutService.js
+++ b/src/core/core.layoutService.js
@@ -148,15 +148,26 @@ module.exports = function(Chart) {
                                minBoxSizes.push({
                                        horizontal: isHorizontal,
                                        minSize: minSize,
-                                       box: box
+                                       box: box,
                                });
                        }
 
                        helpers.each(leftBoxes.concat(rightBoxes, topBoxes, bottomBoxes), getMinimumBoxSize);
 
+                       // If a box has padding, we move the left scale over to avoid ugly charts (see issue #2478)
+                       var maxHorizontalLeftPadding = 0;
+                       var maxHorizontalRightPadding = 0;
+
+                       helpers.each(topBoxes.concat(bottomBoxes), function(horizontalBox) {
+                               if (horizontalBox.getPadding) {
+                                       var boxPadding = horizontalBox.getPadding();
+                                       maxHorizontalLeftPadding = Math.max(maxHorizontalLeftPadding, boxPadding.left);
+                                       maxHorizontalRightPadding = Math.max(maxHorizontalRightPadding, boxPadding.right);
+                               }
+                       });
+
                        // At this point, maxChartAreaHeight and maxChartAreaWidth are the size the chart area could
                        // be if the axes are drawn at their minimum sizes.
-
                        // Steps 5 & 6
                        var totalLeftBoxesWidth = leftPadding;
                        var totalRightBoxesWidth = rightPadding;
@@ -172,8 +183,8 @@ module.exports = function(Chart) {
                                if (minBoxSize) {
                                        if (box.isHorizontal()) {
                                                var scaleMargin = {
-                                                       left: totalLeftBoxesWidth,
-                                                       right: totalRightBoxesWidth,
+                                                       left: Math.max(totalLeftBoxesWidth, maxHorizontalLeftPadding),
+                                                       right: Math.max(totalRightBoxesWidth, maxHorizontalRightPadding),
                                                        top: 0,
                                                        bottom: 0
                                                };
@@ -251,6 +262,13 @@ module.exports = function(Chart) {
                                totalBottomBoxesHeight += box.height;
                        });
 
+                       // We may be adding some padding to account for rotated x axis labels
+                       var leftPaddingAddition = Math.max(maxHorizontalLeftPadding - totalLeftBoxesWidth, 0);
+                       var rightPaddingAddition = Math.max(maxHorizontalRightPadding - totalRightBoxesWidth, 0);
+
+                       totalLeftBoxesWidth += leftPaddingAddition;
+                       totalRightBoxesWidth += rightPaddingAddition;
+
                        // Figure out if our chart area changed. This would occur if the dataset layout label rotation
                        // changed due to the application of the margins in step 6. Since we can only get bigger, this is safe to do
                        // without calling `fit` again
@@ -283,7 +301,7 @@ module.exports = function(Chart) {
                        }
 
                        // Step 7 - Position the boxes
-                       var left = leftPadding;
+                       var left = leftPadding + leftPaddingAddition;
                        var top = topPadding;
 
                        function placeBox(box) {

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 5f35b999f05ddd4169a109695ee57ec359037423..1f6363c07903a7dffc2eff27591e71b8b9f1f4ba 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -51,8 +51,17 @@ module.exports = function(Chart) {
        };
 
        Chart.Scale = Chart.Element.extend({
+               getPadding: function() {
+                       var me = this;
+                       return {
+                               left: me.paddingLeft || 0,
+                               top: me.paddingTop || 0,
+                               right: me.paddingRight || 0,
+                               bottom: me.paddingBottom || 0
+                       };
+               },
 
-               // These methods are ordered by lifecycle. Utilities then follow.
+               // These methods are ordered by lifecyle. Utilities then follow.
                // Any function defined here is inherited by all scale types.
                // Any function can be extended by the scale type
 

diff --git a/test/scale.linear.tests.js b/test/scale.linear.tests.js
index 7102a6f4a8cf3b8ecb1398aa808f44c4a0c3935d..1e18fb529fb09d1a6f54d12841bd58f2d90da7e8 100644 (file)
--- a/test/scale.linear.tests.js
+++ b/test/scale.linear.tests.js
@@ -718,8 +718,8 @@ describe('Linear Scale', function() {
                expect(xScale.paddingTop).toBeCloseToPixel(0);
                expect(xScale.paddingBottom).toBeCloseToPixel(0);
                expect(xScale.paddingLeft).toBeCloseToPixel(0);
-               expect(xScale.paddingRight).toBeCloseToPixel(13.5);
-               expect(xScale.width).toBeCloseToPixel(471);
+               expect(xScale.paddingRight).toBeCloseToPixel(0);
+               expect(xScale.width).toBeCloseToPixel(457.5);
                expect(xScale.height).toBeCloseToPixel(28);
 
                var yScale = chart.scales.yScale0;
@@ -738,8 +738,8 @@ describe('Linear Scale', function() {
                expect(xScale.paddingTop).toBeCloseToPixel(0);
                expect(xScale.paddingBottom).toBeCloseToPixel(0);
                expect(xScale.paddingLeft).toBeCloseToPixel(0);
-               expect(xScale.paddingRight).toBeCloseToPixel(13.5);
-               expect(xScale.width).toBeCloseToPixel(453);
+               expect(xScale.paddingRight).toBeCloseToPixel(0);
+               expect(xScale.width).toBeCloseToPixel(439.5);
                expect(xScale.height).toBeCloseToPixel(46);
 
                expect(yScale.paddingTop).toBeCloseToPixel(0);

diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js
index 9636a0b375c68d41cd3bd90f81fb3706bba49d90..4ca9ab62ec48231b4d8a460b9792eefec02168a1 100644 (file)
--- a/test/scale.logarithmic.tests.js
+++ b/test/scale.logarithmic.tests.js
@@ -717,14 +717,14 @@ describe('Logarithmic Scale tests', function() {
                });
 
                var xScale = chart.scales.xScale;
-               expect(xScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(495);  // right - paddingRight
+               expect(xScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(481.5);  // right - paddingRight
                expect(xScale.getPixelForValue(1, 0, 0)).toBeCloseToPixel(48);   // left + paddingLeft
-               expect(xScale.getPixelForValue(10, 0, 0)).toBeCloseToPixel(283);  // halfway
+               expect(xScale.getPixelForValue(10, 0, 0)).toBeCloseToPixel(276);  // halfway
                expect(xScale.getPixelForValue(0, 0, 0)).toBeCloseToPixel(48);   // 0 is invalid, put it on the left.
 
-               expect(xScale.getValueForPixel(495)).toBeCloseTo(80, 1e-4);
+               expect(xScale.getValueForPixel(481.5)).toBeCloseTo(80, 1e-4);
                expect(xScale.getValueForPixel(48)).toBeCloseTo(1, 1e-4);
-               expect(xScale.getValueForPixel(283)).toBeCloseTo(10, 1e-4);
+               expect(xScale.getValueForPixel(276)).toBeCloseTo(10, 1e-4);
 
                var yScale = chart.scales.yScale;
                expect(yScale.getPixelForValue(80, 0, 0)).toBeCloseToPixel(32);   // top + paddingTop