diff --git a/docs/axes/cartesian/README.md b/docs/axes/cartesian/README.md index c5457161938..7d27c625b48 100644 --- 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 471540e034c..302c3b0c49c 100644 --- 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) {