JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
                               {
  title:{
    text: "Desktop Search Engine Market Share, Dec-2012"
  },
  animationEnabled: true,
  legend:{
    verticalAlign: "center",
    horizontalAlign: "left",
    fontSize: 20,
    fontFamily: "Helvetica"        
  },
  theme: "theme2",
  data: [
    {        
      type: "pie",       
      indexLabelFontFamily: "Garamond",       
      indexLabelFontSize: 20,
      indexLabel: "{label} {y}%",
      startAngle:-20,      
      showInLegend: true,
      toolTipContent:"{label} {y}%",

      // If you want different word in legend not same as label then you can add custom field in dataPoints as 'source' and use that inside legendText: "{source}".

      dataPoints: [
        {  y: 83.24,label: 'Google \'EN\'', legendText: "{source}", source: 'Google \'EN\'' },
        {  y: 8.16, label: 'Yahoo! \'US\'', legendText: "{label}", source: 'Yahoo! \'US\'' },
        {  y: 4.67, label: 'Bing \'EN\'', legendText: "{label}", source: 'Bing \'EN\'' },
      ]
    }
  ]
});
chart.render();