How to redraw SVG Rendered Text after i clicked one of the legends ? The problem i'm having is,the SVG stays on the place .
If i clicked one of the legends, this happens
enter image description here

The method i'm using to make this charts is :

  1. Creating some of empty arrays.
  2. Comparing the values of each series,to find which series has the highest value
  3. Push the xAxis of the highest value to the array.
  4. Render the SVG Text next to the highest value of the series

This is my sample of code :

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

And here is my full code :
https://jsfiddle.net/d70ea4pq/
Any kind of help is really appreciated,Thank you very much

1 Answers

0
ppotaczek On Best Solutions

The text elements are redrawn, but the values are also compared for the hidden series. You can check if the series is visible before creating the arrays:

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

Live demo: https://jsfiddle.net/BlackLabel/59gLzbpt/

API Reference: https://api.highcharts.com/highcharts/chart.events.render