Adding text to the center of pie chart: Highcharts no more working in HC 11

Question

following the sample found in a post, we used the following syntax that worked until migration to HighCharts 11 :

 events: {
      render: function() {
        var series = this.series[0],
          seriesCenter = series.center,
          x = seriesCenter[0] + this.plotLeft,
          y = seriesCenter[1] + this.plotTop,
          text = 'Total: ' + series.total,
          fontMetrics = this.renderer.fontMetrics(16);

        if (!this.customTitle) {
          this.customTitle = this.renderer.text(
              text,
              null,
              null,
              true
            )
            .css({
              transform: 'translate(-50%)',
              fontSize: '16px',
              color: 'red'
            })
            .add();
        }

        this.customTitle.attr({
          x,
          y: y + fontMetrics.f / 2
        });
      }
    }

The issue in HC 11 is due to the this.renderer.fontMetrics that generate an error (Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.), as in the example : https://jsfiddle.net/BlackLabel/mrg2qt6c/

Do you have a fix for that please ? Thanks in advance

Answer 1

That's because, in the newer Highcharts versions, the first argument in fontMetrics method needs to be a valid SVG element, not a number. You can use:

const fontMetrics = this.renderer.fontMetrics(this.customTitle);

this.customTitle.attr({
    x,
    y: y + fontMetrics.f / 2
});

---

Live demo: https://jsfiddle.net/BlackLabel/h31862sy/

API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#fontMetrics