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: "85%",
    verticalAlign: "center",
    dockInsidePlotArea: true,
    fontColor: "#ff6384",
    fontSize: 46,
    fontFamily: "arial"
  },
  legend: {
    verticalAlign: "top"
  },
  data: [{
    type: "doughnut",
    startAngle: -90,
    explodeOnClick: false,
    click: function(e) {
      e.chart.title.set("fontColor", e.chart.selectedColorSet[e.dataPointIndex], false);
      e.chart.title.set("text", e.dataPoint.name);
    },
    dataPoints: [
      { y: 70, name: "Lang 1" },
      { y: 10, name: "Lang 2" },
      { y: 20, name: "Lang 3" }
    ]
  }]
});

chart.render();