JSFiddle - React, Tailwind, and code Playground

HTML

<div id="e_mcf" style="height: 400px; width: 600px;"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
function drawChart() {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('string', 'ABCD');
  dataTable.addColumn('number', 'Percentage');
  dataTable.addColumn({type: 'string', role: 'annotation'});
  dataTable.addColumn({type: 'string', role: 'style'});
 

  dataTable.addRows([
    ['AB', 61, '61%','#FF8B00'],

    ['CD', 90,'90%', '#FF2D00'],

    ['EF', 70,'70%','#0C8E86'],

    ['GH', 85,'85%','#0779CF'],
    
    ['IJ', 70,'70%','#27486B']
  ]);

  var options = {

    vAxis: {gridlines: {color: 'transparent', count: 0}, minValue: 0},
    
    legend: 'none',
    backgroundColor: { fill:'transparent' },
    isStacked: true,
    annotations: {
          textStyle: {
          fontName: 'Lucida Fax',
          fontSize: 10,
          bold: true,
          color: '#fff', 
          auraColor: 'transparent', 
        
        }
      }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('e_mcf'));
  chart.draw(dataTable, options);
}


    </script>