Este es mi jsfiddle
Estoy trazando la marca de flecha al final de algunas series representando el elemento de ruta. Cuando oculto otras leyendas, la marca de flecha se desplaza, sin eliminar la marca de flecha renderizada.
Intenté eliminar elementos renderizados usando las siguientes formas
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); })Pero ninguno de ellos funcionó. Cualquier sugerencia será de ayuda.
No es necesario eliminar las flechas personalizadas, basta con actualizar sus posiciones. Por ejemplo:
if (series.customArrow) { series.customArrow.attr({ d: path }) } else { series.customArrow = series.chart.renderer.path(path) .attr({ fill: series.color }) .add(series.group); }Demostración en vivo: https://jsfiddle.net/BlackLabel/wv41sqro/
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.SVGElement