JSFiddle - React, Tailwind, and code Playground

HTML

<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/html5-javascript-doughnut-chart/" target="_blank" title="JavaScript Doughnut Charts &amp; Graphs ">https://canvasjs.com/html5-javascript-doughnut-chart/</a></div>

JavaScript

window.onload = function () {

   var chart = new CanvasJS.Chart("chartContainer", {
         animationEnabled: true,
         backgroundColor: "transparent",
         title: {
            text: "Current Samples By Discipline",
            fontSize: 12,
            verticalAlign: "bottom",
            horizontalAlign: "center"
         },
         legend: {
            fontSize: 12,
            verticalAlign: "center",
            horizontalAlign: "right"// "top" , "bottom"
         },
         data: [{
               type: "doughnut",
               startAngle: 0,
               radius: 100,
               innerRadius: 30,
               indexLabelFontSize: 22,
               indexLabel: "{null}",
               toolTipContent: "<b>{label}:</b> {y} (#percent%)",
               showInLegend: true,
               legendText: "{label}: {y} (#percent%)",
               dataPoints: [
                  {y: 67, label: "Biochemistry"},
                  {y: 28, label: "Heamatology"},
                  {y: 10, label: "Urine"},
                  {y: 7, label: "Outsource"}
               ]
            }]
      });
chart.render();

}