Fix : Scale label display at top and right. (#3741)

Fix Scale position at rotation when scale is top.

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index 06047e4e39ad49fea1519c49ee5946dfdcf0842e..b7d043547559214fcf722bf5f26ec5efdc93cffd 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -338,8 +338,13 @@ module.exports = function(Chart) {
 
                                        // 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
-                                       me.paddingLeft = me.labelRotation !== 0 ? (cosRotation * firstLabelWidth) + 3 : firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
-                                       me.paddingRight = me.labelRotation !== 0 ? (sinRotation * lineSpace) + 3 : lastLabelWidth / 2 + 3; // when rotated
+                                       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;
+                                       } else {
+                                               me.paddingLeft = firstLabelWidth / 2 + 3; // add 3 px to move away from canvas edges
+                                               me.paddingRight = lastLabelWidth / 2 + 3;
+                                       }
                                } else {
                                        // A vertical axis is more constrained by the width. Labels are the dominant factor here, so get that length first
                                        // Account for padding
@@ -578,15 +583,21 @@ module.exports = function(Chart) {
                                var textBaseline = 'middle';
 
                                if (isHorizontal) {
-                                       if (!isRotated) {
-                                               textBaseline = options.position === 'top' ? 'bottom' : 'top';
-                                       }
 
-                                       textAlign = isRotated ? 'right' : 'center';
+                                       if (options.position === 'bottom') {
+                                               // bottom
+                                               textBaseline = !isRotated? 'top':'middle';
+                                               textAlign = !isRotated? 'center': 'right';
+                                               labelY = me.top + tl;
+                                       } else {
+                                               // top
+                                               textBaseline = !isRotated? 'bottom':'middle';
+                                               textAlign = !isRotated? 'center': 'left';
+                                               labelY = me.bottom - tl;
+                                       }
 
                                        var xLineValue = me.getPixelForTick(index) + helpers.aliasPixel(lineWidth); // xvalues for grid lines
                                        labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset; // x values for optionTicks (need to consider offsetLabel option)
-                                       labelY = (isRotated) ? me.top + 12 : options.position === 'top' ? me.bottom - tl : me.top + tl;
 
                                        tx1 = tx2 = x1 = x2 = xLineValue;
                                        ty1 = yTickStart;