SVG HTML

test.html

<donut-chart data="donutData" width="250" height="250" colors="colors" center-text="10" center-text-sub="Count" animate-hover="true" donut-click="updateBarChart" class="ng-isolate-scope">
  <svg width="250" height="250">
    <g transform="translate(125, 125)">
      <path fill="#CE4B99" d="M0.5749976041696607,-124.99867750402481A125,125 0 1,1 -99.9390966489291,-75.08113585312898L-76.03652369768226,-56.95126920422234A95,95 0 1,0 0.5749976041696777,-94.99825986698494Z"></path>
      <path fill="#9957A0" d="M-91.27662597098112,-69.95411032493814A115,115 0 0,1 -52.17846357747278,-102.48125652378754L-43.193039405111826,-84.61300932450315A95,95 0 0,0 -75.3415580466597,-57.86751792760604Z"></path>
      <path fill="#6564AD" d="M-51.15105919092103,-102.99790844306933A115,115 0 0,1 -10.258563584133336,-114.54152903288089L-8.574063296132389,-94.6122901033154A95,95 0 0,0 -42.16563501856003,-85.12966124378497Z"></path>
      <path fill="#377BBC" d="M-9.112654460059119,-114.638385930244A115,115 0 0,1 -0.5749976041695681,-114.99856250299479L-0.574997604169605,-94.99825986698494A95,95 0 0,0 -7.428154172058129,-94.70914700067854Z"></path>
    </g>
  </svg>
  <div class="tooltip" style="opacity: 0; width: auto; left: 116px; top: -18px;">72</div>
  <div class="center-text-container">
    <div class="center-text">10</div>
    <div class="center-text-sub">Count</div>
  </div>
</donut-chart>