diff --git a/src/ChartInternal/data/data.ts b/src/ChartInternal/data/data.ts
index 0c5d2c303..7b332c529 100644
--- a/src/ChartInternal/data/data.ts
+++ b/src/ChartInternal/data/data.ts
@@ -795,32 +795,35 @@ export default {
 		const {axis, config} = $$;
 		const stepType = config.line_step_type;
 		const isCategorized = axis ? axis.isCategorized() : false;
-
 		const converted = isArray(values) ? values.concat() : [values];
 
 		if (!(isCategorized || /step\-(after|before)/.test(stepType))) {
 			return values;
 		}
 
-		// insert & append cloning first/last value to be fully rendered covering on each gap sides
-		const head = converted[0];
-		const tail = converted[converted.length - 1];
-		const {id} = head;
-		let {x} = head;
-
-		// insert head
-		converted.unshift({x: --x, value: head.value, id});
+		// when all datas are null, return empty array
+		// https://github.com/naver/billboard.js/issues/3124
+		if (converted.length) {
+			// insert & append cloning first/last value to be fully rendered covering on each gap sides
+			const head = converted[0];
+			const tail = converted[converted.length - 1];
+			const {id} = head;
+			let {x} = head;
 
-		isCategorized && stepType === "step-after" &&
+			// insert head
 			converted.unshift({x: --x, value: head.value, id});
 
-		// append tail
-		x = tail.x;
-		converted.push({x: ++x, value: tail.value, id});
+			isCategorized && stepType === "step-after" &&
+				converted.unshift({x: --x, value: head.value, id});
 
-		isCategorized && stepType === "step-before" &&
+			// append tail
+			x = tail.x;
 			converted.push({x: ++x, value: tail.value, id});
 
+			isCategorized && stepType === "step-before" &&
+				converted.push({x: ++x, value: tail.value, id});
+		}
+
 		return converted;
 	},
 
diff --git a/src/ChartInternal/interactions/eventrect.ts b/src/ChartInternal/interactions/eventrect.ts
index 4a64590c4..19810f096 100644
--- a/src/ChartInternal/interactions/eventrect.ts
+++ b/src/ChartInternal/interactions/eventrect.ts
@@ -67,7 +67,7 @@ export default {
 			const xAxisTickValues = $$.getMaxDataCountTarget();
 
 			if (!config.data_xSort) {
-				xAxisTickValues.sort((a, b) => a.x - b.x);
+				xAxisTickValues.sort((a, b) => b.x - a.x);
 			}
 
 			// update data's index value to be alinged with the x Axis
diff --git a/test/internals/data-spec.ts b/test/internals/data-spec.ts
index 3e6cbbbdf..f51b5e08d 100644
--- a/test/internals/data-spec.ts
+++ b/test/internals/data-spec.ts
@@ -1348,4 +1348,30 @@ describe("DATA", () => {
 			expect(r > 0).to.be.true;
 		});
 	});
+
+	describe("null data", () => {
+		before(() => {
+			args = {
+				data: {
+					columns: [
+						["data1", null, null, null, null, null, null],
+						["data2", 1, 10, 100, 1000, 10000, 100000],
+					],
+					type: "area-step"
+				},
+				line: {
+					connectNull: true
+				},
+				axis: {
+					x: {
+						type: "category"
+					}
+				}
+			};
+		});
+
+		it("category x axis with whole dataseries contains null", () => {
+			expect(true).to.be.true;
+		});
+	});
 });