Remove SVG rendered path on Legend Item Click-CodePudding

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

by using destroy method on the arrow mark series.

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();
                })
   }
  }
 }
}

by using the remove method

svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    ele.element.remove();
                })

by using id on SVG

svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    $('#legend4').remove();
                })

by using safeRemoveChild method

svgElements.forEach((ele) => {
                  if(ele.d !== 'M 0 0')
                    ele.safeRemoveChild(ele.element);
                })

But none of them worked. Any suggestions will be helpful.

CodePudding user response：

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