fix(legend): Remove def element added on unload

when legend.usePoint is set with custome point,
remove element added to <defs> on unload

Fix #3660

src/ChartInternal/data/load.ts

@@ -131,6 +131,7 @@ export default {
 	unload(rawTargetIds, customDoneCb): void {
 		const $$ = this;
 		const {state, $el, $T} = $$;
+		const hasLegendDefsPoint = !!$$.hasLegendDefsPoint?.();
 		let done = customDoneCb;
 		let targetIds = rawTargetIds;
 
@@ -158,16 +159,21 @@ export default {
 			.call(endall, done);
 
 		targetIds.forEach(id => {
+			const suffixId = $$.getTargetSelectorSuffix(id);
+
 			// Reset fadein for future load
 			state.withoutFadeIn[id] = false;
 
 			// Remove target's elements
 			if ($el.legend) {
-				$el.legend.selectAll(`.${$LEGEND.legendItem}${$$.getTargetSelectorSuffix(id)}`).remove();
+				$el.legend.selectAll(`.${$LEGEND.legendItem}${suffixId}`).remove();
 			}
 
 			// Remove target
 			$$.data.targets = $$.data.targets.filter(t => t.id !== id);
+
+			// Remove custom point def element
+			hasLegendDefsPoint && $el.defs?.select(`#${$$.getDefsPointId(suffixId)}`).remove();
 		});
 
 		// since treemap uses different data types, it needs to be transformed

src/ChartInternal/shape/point.common.ts

@@ -84,14 +84,20 @@ export default {
 		return config.legend_show && config.point_pattern?.length && config.legend_usePoint;
 	},
 
+	getDefsPointId(id: string): string {
+		const {state: {datetimeId}} = this;
+
+		return `${datetimeId}-point${id}`;
+	},
+
 	/**
 	 * Get generate point function
 	 * @returns {Function}
 	 * @private
 	 */
 	generatePoint(): Function {
 		const $$ = this;
-		const {$el, config, state: {datetimeId}} = $$;
+		const {$el, config} = $$;
 		const ids: string[] = [];
 		const pattern = notEmpty(config.point_pattern) ? config.point_pattern : [config.point_type];
 
@@ -107,7 +113,7 @@ export default {
 				if ($$.hasValidPointType(point)) {
 					point = $$[point];
 				} else if (!hasValidPointDrawMethods(point || config.point_type)) {
-					const pointId = `${datetimeId}-point${id}`;
+					const pointId = $$.getDefsPointId(id);
 					const defsPoint = $el.defs.select(`#${pointId}`);
 
 					if (defsPoint.size() < 1) {

test/internals/legend-spec.ts

@@ -531,6 +531,23 @@ describe("LEGEND", () => {
 
 			expect(nodes.size()).to.be.equal(chart.data().length);
 		});
+
+		it("should defs element added removed on unload?", done => {
+			const {$el: {defs}} = chart.internal;
+			const selector = "[id$=data-3]";
+			const hasDefPoint = !defs.select(selector).empty();
+
+			// when
+			chart.unload({
+				ids: ["data_3"],
+				done() {
+					expect(hasDefPoint).to.be.true;
+					expect(defs.select(selector).empty()).to.be.true;
+
+					done();
+				}
+			});
+		});
 	});
 
 	describe("legend item tile coloring with color_treshold", () => {