Как перерисовать SVG отрендеренный текст из Highcharts

Question

Как перерисовать текст SVG после того, как я нажал одну из легенд? У меня проблема в том, что SVG остается на месте.
Если я нажму одну из легенд, это произойдет

Метод, который я использую для построения этих диаграмм:

1. Создание нескольких пустых массивов.
2. Сравнение значений каждой серии, чтобы найти, какая серия имеет наибольшее значение
3. Вставьте ось с наибольшим значением в массив.
4. Визуализация текста SVG рядом с наибольшим значением в серии

Это мой пример кода:

       events: {
        render: function() {
          const chart = this,
            xAxis = chart.xAxis[0],
            yAxis = chart.yAxis[0],
            offsetX = 5;

          let customElems = chart.customElems || [],
            y,
            x,
            element;

          if (customElems.length) {
            customElems.forEach(elem => {
              elem.destroy();
            });

            customElems.length = 0;
          }

          var series_s_y = [];
          var series_d_y = [];
          var series_x   = [];
          var p          = [];
          chart.series[0].points.forEach((point, i) => {
            x = yAxis.toPixels(point.y) + 10;
            y = xAxis.toPixels(point.x);
            series_s_y.push(x);
            series_x.push(y);
          });

          chart.series[1].points.forEach((point, i) => {
            x = yAxis.toPixels(point.y) + 10;
            y = xAxis.toPixels(point.x);
            series_d_y.push(x);
          });
          for(i = 0;i < series_s_y.length; i++) {

            if(series_d_y[i] > series_s_y[i]) {
              p.push(series_d_y[i]);
            }
            else {
              p.push(series_s_y[i]);
            } 
            element = chart.renderer.text(`${PERSEN[i].toFixed(2)} %`, p[i], series_x[i]).attr({
              "fill": '#000',
              "font-weight": "bold",
              "class": "svg"
            }).add().toFront();

            customElems.push(element);
          }
          chart.customElems = customElems;
        }
      }

А вот мой полный код:
https://jsfiddle.net/d70ea4pq/
Любая помощь очень ценится, большое спасибо

Answer 1

Текстовые элементы перерисовываются, но значения также сравниваются для скрытого ряда. Перед созданием массивов вы можете проверить, видна ли серия:

for (i = 0; i < chart.series[0].points.length; i++) {

    if (series_d_y.length && series_s_y.length) {
        if (series_d_y[i] > series_s_y[i]) {
            p.push(series_d_y[i]);
        } else {
            p.push(series_s_y[i]);
        }
    } else if (series_d_y.length) {
        p.push(series_d_y[i]);
    } else if (series_s_y.length) {
        p.push(series_s_y[i]);
    }

    element = chart.renderer.text(
        `${PERSEN[i].toFixed(2)} %`,
        p[i],
        series_x[i]
    ).attr({
        "fill": '#000',
        "font-weight": "bold",
        "class": "svg"
    }).add().toFront();

    customElems.push(element);
}

Живая демоверсия: https://jsfiddle.net/BlackLabel/59gLzbpt/

Справочник по API: https://api.highcharts.com/highcharts/chart.events.render