fix(size.axis): fix truncated axis when has no data

Add gap pixels when tickWidth is zero. Fix #2675
naver · May 20, 2022 · 40f4b66 · 40f4b66
1 parent 79e1ab7
commit 40f4b66
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 2 deletions.
diff --git a/src/ChartInternal/internals/size.axis.ts b/src/ChartInternal/internals/size.axis.ts
@@ -25,9 +25,12 @@ export default {
 
 		if ($$.axis) {
 			const position = $$.axis?.getLabelPositionById(id);
+			const width = $$.axis.getMaxTickWidth(id, withoutRecompute);
+			const gap = width === 0 ? 0.5 : 0;
 
-			return $$.axis.getMaxTickWidth(id, withoutRecompute) +
-				(position.isInner ? 20 : 40);
+			return width + (
+				position.isInner ? (20 + gap) : 40
+			);
 		} else {
 			return 40;
 		}

diff --git a/test/internals/axis-spec.ts b/test/internals/axis-spec.ts
@@ -2537,6 +2537,33 @@ describe("AXIS", function() {
 				axisY.select(".tick:nth-child(12)").node().getBoundingClientRect().width
 			);
 		});
+
+		it("set option", () => {
+			args = {
+				data: {
+					columns: [
+						["data1"]
+					],
+					empty: {
+						label: {
+							text: "No data..."
+						}
+					},
+					type: "line"
+				},
+				axis: {
+					y: {
+						label: "Your Y Axis"
+					}
+				}
+			};
+		});
+
+		it("<clipPath> width shouldn't truncate y axis tick when has no data", () => {
+			const rect = chart.internal.$el.defs.selectAll("clipPath[id$='yaxis'] rect");
+
+			expect(+rect.attr("width")).to.be.equal(50);
+		});
 	});
 
 	describe("Axes tick culling", () => {