JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

CanvasJS.addColorSet("customColors1", ["#ff6384", "#36a2eb", "#ffce56"]);
var chart = new CanvasJS.Chart("chartContainer", {
colorSet: "customColors1",
  title:{
    text: "90%",
    verticalAlign: "center",
    dockInsidePlotArea: true,
    fontColor: "#ff6384",
    fontSize: 46,
    fontFamily: "arial"
  },
  legend: {
  	verticalAlign: "top"
  },
  data: [{
  	type: "doughnut",
    startAngle: -90,
    innerRadius: "50%",
    showInLegend: true,
    legendMarkerType: "square",
    dataPoints: [
      { y: 70, name: "Red" },
      { y: 10, name: "Green" },
      { y: 20, name: "Yellow" }
    ]
  }]
});

chart.render();