JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

function drawChart() {
    // Create and populate the data table.
    var option = {
        animation: {
            duration: 1000,
            easing: 'out'
        },
        hAxis: {
            textStyle:{
                fontName: 'Nunito',
                fontSize: '16'
            }
        },
        legend: {
            position: "none"
        },
        tooltip: {
            trigger: "none",
            textStyle:{
                fontName: 'Nunito',
                fontSize: '16'
            },
            isHtml: true
        },
        bar: {
            groupWidth: "80%"
        },
        vAxis: {
            format: '0%',
            minValue: 0,
            viewWindowMode: 'maximized',
            textStyle: {
                fontName: 'Nunito',
                fontSize: '16'
            },
            maxValue: 1
        }
    };
    
    var formatter = new google.visualization.NumberFormat({
        fractionDigits: 3,
        pattern: '#,###%'
    });
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'N');
    data.addColumn('number', 'Value');
    data.addColumn({type: 'string', role: 'style'});
    data.addRow(['Orange', 0, 'color: #FF8000']);
    data.addRow(['Red', 0, 'color: #FF0000']);
    data.addRow(['Green', 0, 'color: #00FF00']);
    data.addRow(['Blue', 0, 'color: #0000FF']);
    data.addRow(['Purple', 0, 'color: #800080']);
    // Create and draw the visualization.
    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    chart.draw(data, option);
    data.setValue(0, 1, 0.1);
    data.setValue(1, 1, 0.3);
    data.setValue(2, 1, 0.4);
    data.setValue(3, 1, 0.4);
    data.setValue(4, 1, 0.4);
    chart.draw(data, option);
}

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);