Take vertical padding into account

diff --git a/src/core/core.layoutService.js b/src/core/core.layoutService.js
index 2afdedfa395cd0ff27ed4983f2a173c4a12a4d2b..39cf26b90069fc466cadca06664525e3ad7edd93 100644 (file)
--- a/src/core/core.layoutService.js
+++ b/src/core/core.layoutService.js
@@ -154,9 +154,11 @@ module.exports = function(Chart) {
 
                        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)
+                       // If a horizontal box has padding, we move the left boxes over to avoid ugly charts (see issue #2478)
                        var maxHorizontalLeftPadding = 0;
                        var maxHorizontalRightPadding = 0;
+                       var maxVerticalTopPadding = 0;
+                       var maxVerticalBottomPadding = 0;
 
                        helpers.each(topBoxes.concat(bottomBoxes), function(horizontalBox) {
                                if (horizontalBox.getPadding) {
@@ -166,6 +168,14 @@ module.exports = function(Chart) {
                                }
                        });
 
+                       helpers.each(leftBoxes.concat(rightBoxes), function(verticalBox) {
+                               if (verticalBox.getPadding) {
+                                       var boxPadding = verticalBox.getPadding();
+                                       maxVerticalTopPadding = Math.max(maxVerticalTopPadding, boxPadding.top);
+                                       maxVerticalBottomPadding = Math.max(maxVerticalBottomPadding, boxPadding.bottom);
+                               }
+                       });
+
                        // 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
@@ -264,10 +274,12 @@ module.exports = function(Chart) {
 
                        // 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;
+                       totalRightBoxesWidth += Math.max(maxHorizontalRightPadding - totalRightBoxesWidth, 0);
+
+                       var topPaddingAddition = Math.max(maxVerticalTopPadding - totalTopBoxesHeight, 0);
+                       totalTopBoxesHeight += topPaddingAddition;
+                       totalBottomBoxesHeight += Math.max(maxVerticalBottomPadding - totalBottomBoxesHeight, 0);
 
                        // 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
@@ -302,7 +314,7 @@ module.exports = function(Chart) {
 
                        // Step 7 - Position the boxes
                        var left = leftPadding + leftPaddingAddition;
-                       var top = topPadding;
+                       var top = topPadding + topPaddingAddition;
 
                        function placeBox(box) {
                                if (box.isHorizontal()) {

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 1f6363c07903a7dffc2eff27591e71b8b9f1f4ba..32ece041f5b3d8879ca7569f0c22bd0f926764e3 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -51,6 +51,12 @@ module.exports = function(Chart) {
        };
 
        Chart.Scale = Chart.Element.extend({
+               /**
+                * Get the padding needed for the scale
+                * @method getPadding
+                * @private
+                * @returns {Padding} the necessary padding
+                */
                getPadding: function() {
                        var me = this;
                        return {

diff --git a/test/scale.logarithmic.tests.js b/test/scale.logarithmic.tests.js
index 4ca9ab62ec48231b4d8a460b9792eefec02168a1..14a382e5f76664f155e80514178ff08a634b2e5b 100644 (file)
--- a/test/scale.logarithmic.tests.js
+++ b/test/scale.logarithmic.tests.js
@@ -722,7 +722,7 @@ describe('Logarithmic Scale tests', function() {
                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(481.5)).toBeCloseTo(80, 1e-4);
+               expect(xScale.getValueForPixel(481.5)).toBeCloseToPixel(80);
                expect(xScale.getValueForPixel(48)).toBeCloseTo(1, 1e-4);
                expect(xScale.getValueForPixel(276)).toBeCloseTo(10, 1e-4);