fix(clip): Fix x axis hide on title.bottom

Adjust x axis' <clipPath> height to prevent axis being hidden

Fix #3364

src/ChartInternal/internals/clip.ts

@@ -57,13 +57,13 @@ export default {
 		const isRotated = config.axis_rotated;
 		const left = Math.max(30, margin.left) - (isRotated ? 0 : 20);
 
-		const x = isRotated ? -(1 + left) : -(left - 1);
-		const y = -Math.max(15, margin.top);
-		const w = isRotated ? margin.left + 20 : width + 10 + left;
-
 		// less than 20 is not enough to show the axis label 'outer' without legend
 		const h = (isRotated ? (margin.top + height) + 10 : margin.bottom) + 20;
 
+		const x = isRotated ? -(1 + left) : -(left - 1);
+		const y = -Math.max(15, margin.bottom);
+		const w = isRotated ? margin.left + 20 : width + 10 + left;
+
 		node
 			.attr("x", x)
 			.attr("y", y)

src/config/Options/axis/x.ts

@@ -46,6 +46,7 @@ export default {
 	 * - **log** type:
 	 *   - the x values specified by [`data.x`](#.data%25E2%2580%25A4x)(or by any equivalent option), must be exclusively-positive.
 	 *   - x axis min value should be >= 0.
+	 *   - for 'category' type, `data.xs` option isn't supported.
 	 *
 	 * @name axis․x․type
 	 * @memberof Options

test/internals/title-spec.ts

@@ -96,6 +96,14 @@ describe("TITLE", () => {
 						args.title.padding.top + height + args.title.padding.bottom
 					);
 				});
+
+				it("check x axis <clipPath>'s height", () => {
+					const {internal: {state}, $: {svg}} = chart;
+					const xClipPath = svg.select(`#${state.clip.idXAxis} rect`).node();
+
+					expect(Math.abs(+xClipPath.getAttribute("y"))).to.be.below(100);
+
+				});
 			});
 
 			describe("and position left", () => {