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}",
      dataPoints: [
        {  y: 778205227,  label: "Zoom" },
        {  y: 612416375, label: "Tesla " },
        {  y: 513195075, label: "Roku" },
      ]
    }
  ]
});

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