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.
- 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
Close #3571

src/ChartInternal/Axis/Axis.ts

@@ -680,7 +680,7 @@ class Axis {
 
 	getXAxisTickTextY2Overflow(defaultPadding) {
 		const $$ = this.owner;
-		const {axis, config, state} = $$;
+		const {axis, config, state: {current, isLegendRight, legendItemWidth}} = $$;
 		const xAxisTickRotate = $$.getAxisTickRotate("x");
 		const positiveRotation = xAxisTickRotate > 0 && xAxisTickRotate < 90;
 
@@ -690,10 +690,12 @@ class Axis {
 			!config.axis_x_tick_multiline &&
 			positiveRotation
 		) {
-			const widthWithoutCurrentPaddingLeft = state.current.width - $$.getCurrentPaddingByDirection("left");
+			const y2AxisWidth = (config.axis_y2_show && current.maxTickSize.y2.width) || 0;
+			const legendWidth = (isLegendRight && legendItemWidth) || 0;
+			const widthWithoutCurrentPaddingLeft = 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
 

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;

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, 43, 53, 10)
+			});
+
 			it("update args", () => {
 				args.data.columns[0] = [
 					"x",
@@ -1376,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");
 			});
@@ -1422,7 +1454,7 @@ describe("AXIS", function() {
 				});
 
 				it("should be above 0 if rotated", () => {
-					compareOverflow(71);
+					compareOverflow(18);
 				});
 
 				it("update config", () => {
@@ -1438,7 +1470,7 @@ describe("AXIS", function() {
 				});
 
 				it("should be above defaultPadding if padding left is set", () => {
-					compareOverflow( 80);
+					compareOverflow( 27);
 				});
 
 				it("update config", () => {