This is my jsfiddle
I'm plotting the Arrow mark at the end of some series by rendering the path element. When I hide other legends arrow mark gets shifted, without removing rendered arrow mark.
I tried removing rendered elements using the below ways
plotOptions: {
series: {
events: {
legendItemClick: {
//svgElements are retrieved from called function which draws arrow mark
svgElements.forEach((ele) => {
if(ele.d !== 'M 0 0')
ele.destroy();
})
}
}
}
}
svgElements.forEach((ele) => {
if(ele.d !== 'M 0 0')
ele.element.remove();
})
svgElements.forEach((ele) => {
if(ele.d !== 'M 0 0')
$('#legend4').remove();
})
svgElements.forEach((ele) => {
if(ele.d !== 'M 0 0')
ele.safeRemoveChild(ele.element);
})
But none of them worked. Any suggestions will be helpful.
You don't need to remove the custom arrows, it is enough if you update their positions. For example:
if (series.customArrow) {
series.customArrow.attr({
d: path
})
} else {
series.customArrow = series.chart.renderer.path(path)
.attr({
fill: series.color
})
.add(series.group);
}
Live demo: https://jsfiddle.net/BlackLabel/wv41sqro/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement