ticks.padding option applies to both vertical and horizontal axes

diff --git a/docs/axes/cartesian/README.md b/docs/axes/cartesian/README.md
index c5457161938da8eeecabcd30db986e28f0434fff..7d27c625b487b9da83757d8c19dd65f9ed64a885 100644 (file)
--- a/docs/axes/cartesian/README.md
+++ b/docs/axes/cartesian/README.md
@@ -31,7 +31,7 @@ The following options are common to all cartesian axes but do not apply to other
 | `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.*
 | `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.*
 | `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.*
-| `padding` | `Number` | `10` | Padding between the tick label and the axis. *Note: Only applicable to horizontal scales.*
+| `padding` | `Number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction.
 
 ## Axis ID
 The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used.

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index ff2534aaa7557744203a4a3840ac1c84b5d90540..5d8d82576a6049ebed26da5ea56516b95ff68988 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -340,6 +340,7 @@ module.exports = function(Chart) {
                                var largestTextWidth = helpers.longestText(me.ctx, tickFont.font, me.ticks, me.longestTextCache);
                                var tallestLabelHeightInLines = helpers.numberOfLabelLines(me.ticks);
                                var lineSpace = tickFont.size * 0.5;
+                               var tickPadding = me.options.ticks.padding;
 
                                if (isHorizontal) {
                                        // A horizontal axis is more constrained by the height.
@@ -354,7 +355,7 @@ module.exports = function(Chart) {
                                                + (tickFont.size * tallestLabelHeightInLines)
                                                + (lineSpace * tallestLabelHeightInLines);
 
-                                       minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight);
+                                       minSize.height = Math.min(me.maxHeight, minSize.height + labelHeight + tickPadding);
                                        me.ctx.font = tickFont.font;
 
                                        var firstTick = me.ticks[0];
@@ -379,7 +380,7 @@ module.exports = function(Chart) {
                                        if (tickOpts.mirror) {
                                                largestTextWidth = 0;
                                        } else {
-                                               largestTextWidth += me.options.ticks.padding;
+                                               largestTextWidth += tickPadding;
                                        }
                                        minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
                                        me.paddingTop = tickFont.size / 2;
@@ -605,19 +606,21 @@ module.exports = function(Chart) {
                                var tx1, ty1, tx2, ty2, x1, y1, x2, y2, labelX, labelY;
                                var textAlign = 'middle';
                                var textBaseline = 'middle';
+                               var tickPadding = optionTicks.padding;
 
                                if (isHorizontal) {
+                                       var labelYOffset = tl + tickPadding;
 
                                        if (options.position === 'bottom') {
                                                // bottom
                                                textBaseline = !isRotated? 'top':'middle';
                                                textAlign = !isRotated? 'center': 'right';
-                                               labelY = me.top + tl;
+                                               labelY = me.top + labelYOffset;
                                        } else {
                                                // top
                                                textBaseline = !isRotated? 'bottom':'middle';
                                                textAlign = !isRotated? 'center': 'left';
-                                               labelY = me.bottom - tl;
+                                               labelY = me.bottom - labelYOffset;
                                        }
 
                                        var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
@@ -630,7 +633,6 @@ module.exports = function(Chart) {
                                        y2 = chartArea.bottom;
                                } else {
                                        var isLeft = options.position === 'left';
-                                       var tickPadding = optionTicks.padding;
                                        var labelXOffset;
 
                                        if (optionTicks.mirror) {