diff --git a/src/ChartInternal/data/convert.ts b/src/ChartInternal/data/convert.ts
index 121bea6ac..8b6e63878 100644
--- a/src/ChartInternal/data/convert.ts
+++ b/src/ChartInternal/data/convert.ts
@@ -199,7 +199,7 @@ export default {
 			t.values.forEach((v, i) => (v.index = i));
 
 			// this needs to be sorted because its index and value.index is identical
-			$$.data.xs[t.id].sort((v1, v2) => v1 - v2);
+			$$.data.xs[t.id]?.sort((v1, v2) => v1 - v2);
 		});
 
 		// cache information about values
diff --git a/src/ChartInternal/internals/color.ts b/src/ChartInternal/internals/color.ts
index b465bb2ca..058345ebc 100644
--- a/src/ChartInternal/internals/color.ts
+++ b/src/ChartInternal/internals/color.ts
@@ -103,7 +103,10 @@ export default {
 		}
 
 		return function(d: IDataRow | IArcData | string): string {
-			const id: string = (d as IDataRow).id || (d as IArcData).data?.id || d as string;
+			const id: string = (d as IDataRow).id ||
+				(d as IArcData).data?.id ||
+				d as string;
+
 			const isLine = $$.isTypeOf(id, ["line", "spline", "step"]) || !config.data_types[id];
 			let color;
 
diff --git a/src/ChartInternal/internals/legend.ts b/src/ChartInternal/internals/legend.ts
index db65e3fde..5b5d3541b 100644
--- a/src/ChartInternal/internals/legend.ts
+++ b/src/ChartInternal/internals/legend.ts
@@ -606,10 +606,11 @@ export default {
 
 		const getColor = id => {
 			const data = $$.getDataById(id);
-
-			return $$.levelColor ?
+			const color = $$.levelColor ?
 				$$.levelColor(data.values[0].value) :
 				$$.color(data);
+
+			return color;
 		};
 
 		const usePoint = config.legend_usePoint;
diff --git a/test/internals/data-spec.ts b/test/internals/data-spec.ts
index e78c647d8..e19657192 100644
--- a/test/internals/data-spec.ts
+++ b/test/internals/data-spec.ts
@@ -1118,4 +1118,41 @@ describe("DATA", () => {
 			});
 		});
 	});
+
+	describe("data.idConverter", () => {
+		before(() => {
+			args = {
+				data: {
+					idConverter: function(id) {
+						return id ? id : "data2";
+					},
+					columns: [
+						["data1", 30, 200, 100],
+						["", 50, 20, 10]
+					],
+					colors: {
+						data1: "red",
+						data2: "blue"
+					}
+				}
+			};
+		})
+
+		it("should generate chart without error.", () => {
+			expect(
+				chart = util.generate(args)
+			).to.not.throw;
+		});
+
+		it("data color should be defined correctly.", () => {
+			const {svg} = chart.$;
+
+			["circle", "line", "path"].forEach(type => {
+				const prop = type === "circle" ? "fill" : "stroke";
+				const node = svg.select(`[class$=data2] > ${type}`);
+
+				expect(node.style(prop)).to.be.equal("blue");
+			});
+		});
+	});
 });