Proper text alignment for multiline tick labels (#6988)

* Proper text alignment for multiline tick labels

* Handle other rotations as well

diff --git a/src/core/core.scale.js b/src/core/core.scale.js
index a68745c98be3cbe9fa4e00eb54fc0cefb0d3c146..8941c14e0ae85006728156ead79724831347e2c3 100644 (file)
--- a/src/core/core.scale.js
+++ b/src/core/core.scale.js
@@ -1129,9 +1129,13 @@ class Scale extends Element {
 
                        if (isHorizontal) {
                                x = pixel;
-                               textOffset = position === 'top'
-                                       ? ((!rotation ? 0.5 : 1) - lineCount) * lineHeight
-                                       : (!rotation ? 0.5 : 0) * lineHeight;
+                               if (position === 'top') {
+                                       textOffset = (Math.sin(rotation) * (lineCount / 2) + 0.5) * lineHeight;
+                                       textOffset -= (rotation === 0 ? (lineCount - 0.5) : Math.cos(rotation) * (lineCount / 2)) * lineHeight;
+                               } else {
+                                       textOffset = Math.sin(rotation) * (lineCount / 2) * lineHeight;
+                                       textOffset += (rotation === 0 ? 0.5 : Math.cos(rotation) * (lineCount / 2)) * lineHeight;
+                               }
                        } else {
                                y = pixel;
                                textOffset = (1 - lineCount) * lineHeight / 2;