JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?.js"></script>
<div id="chart"></div>

JavaScript

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn({type: 'string', role: 'style'});
    
    data.addRows([
        ['Detractors', 400, 'a%', 'color: #e0440e'],
        ['Passives', 300, 'b%', 'color: #e6693e'],
        ['Promoters', 400, 'c%', 'color: #ec8f6e']
    ]);
    
    // use a DataView to null out the values in the value and annotation columns to start,
    // so the chart will animate properly when we redraw it
    var view = new google.visualization.DataView(data);
    view.setColumns([0, {
        type: 'number',
        calc: function () {return 0;}
    }, {
        type: 'string',
        role: 'annotation',
        calc: function () {return '';}
    }, 3]);
    
    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    var option = {
        title: "Here is Title",
        height: 400,
        width: 600,
        animation: {
            duration: 1000,
            easing: 'out'
        },
        tooltip: {
            isHtml: true
        },
        legend: 'none',
        hAxis: {
            title: "Cups"
        },
        vAxis: {
            title: "Year",
            minValue: 0,
            maxValue: 500
        }
    };
    
    var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
        google.visualization.events.removeListener(runOnce);
        chart.draw(data, option);
    });
    
    chart.draw(view, option);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});