How to center the title text in pie chart highchart?

I am trying to do center align the title text of the pie chart Highchart. Was able to achieve that but on mouse hover, and mouse out the title data doesn't get updated. Anyone can help me with the same. On MouseHOver trying to do the below mentioned code

 point: {
            events: {
              mouseOver: function() {
                                                  let span = '<span style="color:${this.color}" class="dealer-title">${this.y}<br/> <span style="color:#33383e;}" class="text-truncate" title="${this.name}"><b> </b></span></span>';

                $('.customTitle')[0].innerHTML = span
              }
            }
          }
        }
      },

fiddle attached: https://jsfiddle.net/5sutmqv3/1/

Solution

You need to enable useHTML argument in the text method call:

  chart: {
    type: 'pie',
    events: {
      load: function() {
        ...
        var text = rend.text("textTexttext", left, top, true).attr({
            'text-anchor': 'middle',
            align: 'center',
            'zIndex': 10
          }).addClass('customTitle').add();
      }
    }
  }

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

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