fix(api): fix tooltip work for .load() with xs key

when data initializes with empty data, do not initialize eventRect
and initializes when data is loaded dynamically.

Fix #3194

src/ChartInternal/interactions/eventrect.ts

@@ -32,7 +32,9 @@ export default {
 
 		if ($el.eventRect) {
 			$$.updateEventRect($el.eventRect, true);
-		} else {
+
+		// do not initialize eventRect when data is empty
+		} else if ($$.data.targets.length) {
 			const eventRects = $$.$el.main.select(`.${$EVENT.eventRects}`)
 				.style("cursor", config.zoom_enabled && config.zoom_type !== "drag" ? (
 					config.axis_rotated ? "ns-resize" : "ew-resize"
@@ -61,6 +63,9 @@ export default {
 			if ($$.state.inputType === "touch" && !$el.svg.on("touchstart.eventRect") && !$$.hasArcType()) {
 				$$.bindTouchOnEventRect(isMultipleX);
 			}
+
+			// when initilazed with empty data and data loaded later, need to update eventRect
+			state.rendered && $$.updateEventRect($el.eventRect, true);
 		}
 
 		if (!isMultipleX) {

test/api/load-spec.ts

@@ -513,6 +513,45 @@ describe("API load", function() {
 				}
 			});
 		});
+
+		it("set options: initialize with empty data", () => {
+			args = {
+				data: {
+					columns: [],
+					type: "area"
+				}
+			};
+		});
+
+		it("check for correct event binding", done => {
+			setTimeout(() => {
+				chart.load({
+					xs: {
+						data: 'dataX'
+					},
+					columns: [
+						["data", 300, 350, 300, 200, 50, 300],
+						["dataX", 1, 2, 3, 4, 5, 6],
+					],
+					done: function() {
+						this.tooltip.show({
+							data: {
+								x: 3,
+								id: "data",
+								value: 300
+							}
+						});
+
+						const {tooltip} = this.$;
+
+						expect(tooltip.select(".name").text()).to.be.equal("data");
+						expect(+tooltip.select(".value").text()).to.be.equal(300);
+
+						done();
+					}
+				});
+			  }, 1000);
+		});
 	});
 
 	describe("different type loading", () => {