JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="wrapper">
  <div id="chartContainer" style="height: 360px; width: 100%;"></div>
  <img id = "userImg" src="https://i.postimg.cc/rFNJQfgt/employee.png" style="height: 100px; width: auto;">
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  data: [
    {
      type: "doughnut",
      yValueFormatString: "$###,###,###.00",
      toolTipContent: "{label} <br/> {y}",
      indexLabelPlacement: "inside",
      indexLabelMaxWidth: 35,
      innerRadius: 100,
      dataPoints: [
        {  y: 778205227,  indexLabel: "Zoom \u1160" },
        {  y: 612416375, indexLabel: "Tesla \u1E6A" },
        {  y: 513195075, indexLabel: "Roku \u1180" },
      ]
    }
  ]
});

chart.render();
positionImage();

function positionImage() {
  var img = document.getElementById("userImg");
  img.style.position = "absolute";
  img.style.display = "block";
  img.style.top =  chart.height/2 - img.offsetHeight/2 + "px";
  img.style.left = chart.width/2 - img.offsetWidth/2.3 + "px";
}


window.addEventListener("resize", function() {
  positionImage();
});