I want to attain pie/donut chart tooltip similar to google charts (this) tooltip. I am using highcharts-react-official.

Below is the code, tried positioner function with different position but unable to attain what needs to be attained on different resolutions

chart: {
  zooming: {
    mouseWheel: {
      enabled: false
    }
  },
  height: '210px',
  spacing: [0, 0, 0, 0],
  },
  legend: {
    itemStyle: {
      fontSize: '12px'
    },
    layout: stats?.allocated_space_credits?.length < 5 ? 'vertical' : 'horizontal',
    align: 'left',
    verticalAlign: 'middle',
    borderWidth: 0,
    width: 280,
    itemWidth: 140,
    itemMarginBottom: 13
  },
  title: {
    text: ''
  },
  credits: false,
  colors: stats?.allocated_space_credits?.map(item => item?.space?.color),
  tooltip: {
    padding: 0,
    borderRadius: 4,
    followPointer: false,
    outside: true,
    useHTML: true,
    formatter: function(tooltip) {
      let goal = stats?.allocated_space_credits.find(item => item?.space?.name == this?.point?.name);
      return `<div class="chart-tooltip">
        <div class="head">${this.point.name}</div>
        <div class="body">
          <div class="content-row">
            <div class="title">Credit allocated: </div>
            <div class="count">${this.point.y}</div>
          </div>
          ${ goal?.space?.space_goals?.length ? `<div class="content-row">
              <div class="title">Goal: </div>
              <div class="tag-wrapper">
                ${goal?.space?.space_goals?.map((item, idx) => `<span class="custom-tag">${item?.['name']}</span>`)}
              </div>
          </div>` : '' }
        </div>
      </div>
      `
    },
    positioner: function(labelWidth, _, point) {
      return {
        x: point.plotX,
        y: point.plotY
      };
    },
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: false,
      },
      showInLegend: true,
      borderWidth: 2,
      fillColor: '#ECEDF0',
      borderRadius: 1,
      states: {
        hover: {
          enabled: false,
        }
      }
    }
  },
  series: [
    {
      type: "pie",
      innerSize: "62%",
      data: stats?.allocated_space_credits?.map(item => ({ name: item?.space?.name, y: item?.allocated_credits})),
      states: {
        inactive: {
          enabled: false
        }
      },
    }
  ],
  accessibility: {
    enabled: false
  }
}

Any help will be appreciated. Thanks in advance.