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: 460px; width: 460px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "indexLabel wrap in doughnut",
    fontSize: 20,
  },
  animationEnabled: true,
  data: [
    {        
      type: "doughnut",
      startAngle: 320,
      innerRadius: 80,
      indexLabel: " #percent %",
      indexLabelFontColor : "black",
      indexLabelPlacement: "outside", 
      indexLabelWrap: true ,
      dataPoints: [
        {  y: 280, label : "some label" },          
        { y: 148,label : "other label" },
        {  y: 16, label : "some other label"},
        {  y: 32, label : "label" }  ,
        {  y: 12, label : "label" }  
      ]
    }
  ]
});
chart.render();