From 1a6a39dea6c9cfc49f271d36ea77b1a72623ee20 Mon Sep 17 00:00:00 2001
From: Kamil Michalski <kamil.michalski@hksinformatik.de>
Date: Tue, 19 Dec 2023 15:21:16 +0100
Subject: [PATCH 1/2] fix(axis): Fixed x axis tick texts rotation when legend
 is positioned right

To calculate the x axis length properly legend
width has to be added to the calculations when
it is positioned to the right.

Fix #3570
---
 src/ChartInternal/internals/size.axis.ts |  5 ++--
 test/internals/axis-spec.ts              | 32 ++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/ChartInternal/internals/size.axis.ts b/src/ChartInternal/internals/size.axis.ts
index b1eb38c32..3b81e15ce 100644
--- a/src/ChartInternal/internals/size.axis.ts
+++ b/src/ChartInternal/internals/size.axis.ts
@@ -148,8 +148,9 @@ export default {
 	 */
 	needToRotateXAxisTickTexts(): boolean {
 		const $$ = this;
-		const {state: {axis, current}} = $$;
-		const xAxisLength = current.width -
+		const {state: {axis, current, isLegendRight, legendItemWidth}} = $$;
+		const legendWidth = isLegendRight && legendItemWidth;
+		const xAxisLength = current.width - legendWidth -
 			$$.getCurrentPaddingByDirection("left") - $$.getCurrentPaddingByDirection("right");
 		const tickCountWithPadding = axis.x.tickCount +
 			axis.x.padding.left + axis.x.padding.right;
diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
index d7326ce71..29f8fe0ce 100644
--- a/test/internals/axis-spec.ts
+++ b/test/internals/axis-spec.ts
@@ -1352,6 +1352,38 @@ describe("AXIS", function() {
 				compare(0, 18.8125, 48, 0);
 			});
 
+			it("update args", () => {
+				args = {
+					...args,
+					legend: {
+						position: "right"
+					}
+				};
+				args.data.columns[0] = [
+					"x",
+					"categoryname1111",
+					"categoryname2222",
+					"categoryname3333",
+					"categoryname4444",
+					"categoryname5555",
+					"categoryname6666"
+				]
+			});
+
+			it("should rotate tick texts if there is not enough space between ticks and legend is right", () => {
+				chart.$.main.selectAll(`.${$AXIS.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(15)");
+					expect(text.attr("y")).to.be.equal("9");
+					expect(tspan.attr("dx")).to.be.equal("2.070552360820166");
+				});
+
+				compare(15, 45, 56, 71)
+			});
+
 			it("update args", () => {
 				args.data.columns[0] = [
 					"x",

From 721b02421c88edda9551640c0dc9995970abe38f Mon Sep 17 00:00:00 2001
From: Kamil Michalski <kamil.michalski@hksinformatik.de>
Date: Tue, 19 Dec 2023 15:53:46 +0100
Subject: [PATCH 2/2] fix(axis): Added y2 axis and legend width to
 `xAxisTickTextY2Overflow` calculation

Since the changes to how padding is applied
in 3.10.0 the width of y2 axis and legend
needs to be considered in the `xAxisTickTextY2Overflow` calculation.

Fix #3570
---
 src/ChartInternal/Axis/Axis.ts |  4 +++-
 test/internals/axis-spec.ts    | 10 +++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/ChartInternal/Axis/Axis.ts b/src/ChartInternal/Axis/Axis.ts
index a771d3e45..94db5f315 100644
--- a/src/ChartInternal/Axis/Axis.ts
+++ b/src/ChartInternal/Axis/Axis.ts
@@ -690,10 +690,12 @@ class Axis {
 			!config.axis_x_tick_multiline &&
 			positiveRotation
 		) {
+			const y2AxisWidth = (state.orgConfig.axis?.y2?.show && state.current.maxTickSize.y2.width) || 0;
+			const legendWidth = (state.isLegendRight && state.legendItemWidth) || 0;
 			const widthWithoutCurrentPaddingLeft = state.current.width - $$.getCurrentPaddingByDirection("left");
 			const maxOverflow = this.getXAxisTickMaxOverflow(
 				xAxisTickRotate, widthWithoutCurrentPaddingLeft - defaultPadding
-			);
+			) - y2AxisWidth - legendWidth;
 			const xAxisTickTextY2Overflow = Math.max(0, maxOverflow) +
 				defaultPadding; // for display inconsistencies between browsers
 
diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
index 29f8fe0ce..85dcc909e 100644
--- a/test/internals/axis-spec.ts
+++ b/test/internals/axis-spec.ts
@@ -1381,7 +1381,7 @@ describe("AXIS", function() {
 					expect(tspan.attr("dx")).to.be.equal("2.070552360820166");
 				});
 
-				compare(15, 45, 56, 71)
+				compare(15, 43, 53, 10)
 			});
 
 			it("update args", () => {
@@ -1408,13 +1408,13 @@ describe("AXIS", function() {
 						expect(tspan.attr("dx")).to.be.equal("2.070552360820166");
 					});
 
-				compare(15, 45, 56, 71)
+				compare(15, 45, 56, 18)
 			});
 
 			it("should not resize x axis when all data hidden", () => {
 				chart.hide("data1");
 
-				compare(args.axis.x.tick.rotate, 6, 55, 71);
+				compare(args.axis.x.tick.rotate, 6, 55, 18);
 
 				chart.show("data1");
 			});
@@ -1454,7 +1454,7 @@ describe("AXIS", function() {
 				});
 
 				it("should be above 0 if rotated", () => {
-					compareOverflow(71);
+					compareOverflow(18);
 				});
 
 				it("update config", () => {
@@ -1470,7 +1470,7 @@ describe("AXIS", function() {
 				});
 
 				it("should be above defaultPadding if padding left is set", () => {
-					compareOverflow( 80);
+					compareOverflow( 27);
 				});
 
 				it("update config", () => {