From fe42e64ca2bab7532cd2933fe4da5925d37e384c Mon Sep 17 00:00:00 2001
From: Marc Faber <faber@genodata.de>
Date: Fri, 19 Mar 2021 22:37:17 +0100
Subject: [PATCH] fix(axis): calculate x axis height correctly for negative
 tick rotation settings

use absolute rotate value for calculation inside getHorizontalAxisHeight()

Fix #1994
Close #1995
---
 AUTHORS.txt                              |  1 +
 src/ChartInternal/internals/size.axis.ts |  2 +-
 test/internals/axis-spec.ts              | 47 +++++++++++++++++++++++-
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/AUTHORS.txt b/AUTHORS.txt
index f07686775..a0c72a140 100644
--- a/AUTHORS.txt
+++ b/AUTHORS.txt
@@ -43,3 +43,4 @@ Artem Savienkov <as@attractgroup.com>
 Hamid Sarfraz <praisedpk@gmail.com>
 Alan Hamlett <alan.hamlett@gmail.com>
 Nicolas Forêt <nicolas4@gmail.com>
+Marc Faber <faber@genodata.de>
diff --git a/src/ChartInternal/internals/size.axis.ts b/src/ChartInternal/internals/size.axis.ts
index ac63aeaf9..d3fb933a6 100644
--- a/src/ChartInternal/internals/size.axis.ts
+++ b/src/ChartInternal/internals/size.axis.ts
@@ -66,7 +66,7 @@ export default {
 		) {
 			h = 30 +
 				$$.axis.getMaxTickWidth(id) *
-				Math.cos(Math.PI * (90 - rotate) / 180);
+				Math.cos(Math.PI * (90 - Math.abs(rotate)) / 180);
 
 			if (!config.axis_x_tick_multiline && current.height) {
 				if (h > current.height / 2) {
diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
index 30c31fe65..7e4411eb4 100644
--- a/test/internals/axis-spec.ts
+++ b/test/internals/axis-spec.ts
@@ -1029,7 +1029,7 @@ describe("AXIS", function() {
 	});
 
 	describe("axis.x.tick.rotate", () => {
-		describe("not rotated", () => {
+		describe("rotation > 0", () => {
 			before(() => {
 				args = {
 					data: {
@@ -1073,6 +1073,51 @@ describe("AXIS", function() {
 				expect(height).to.be.below(80);
 			});
 		});
+
+		describe("rotation < 0", () => {
+			before(() => {
+				args = {
+					data: {
+						x: "x",
+						columns: [
+							["x", "category 1", "category 2", "category 3", "category 4", "category 5", "category 6"],
+							["data1", 30, 200, 100, 400, 150, 250],
+							["data2", 50, 20, 10, 40, 15, 25]
+						]
+					},
+					axis: {
+						x: {
+							type: "category",
+							tick: {
+								rotate: -60
+							}
+						}
+					}
+				};
+			});
+
+			it("should rotate tick texts", () => {
+				chart.$.main.selectAll(`.${CLASS.axisX} g.tick`).each(function() {
+					const tick = d3Select(this);
+					const text = tick.select("text");
+					const tspan = text.select("tspan");
+
+					expect(text.attr("transform")).to.be.equal("rotate(-60)");
+					expect(text.attr("y")).to.be.equal("1.5");
+					expect(tspan.attr("dx")).to.be.equal("-6.928203230275509");
+				});
+			});
+
+			it("should have automatically calculated x axis height", () => {
+				const internal = chart.internal;
+				const box = internal.$el.main.select(`.${CLASS.axisX}`).node().getBoundingClientRect();
+				const height = internal.getHorizontalAxisHeight("x");
+
+				expect(box.height).to.be.above(50);
+				expect(height).to.be.above(68);
+				expect(height).to.be.below(80);
+			});
+		});
 	});
 
 	describe("axis.x.tick.autorotate", () => {