JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="visualization" style="width: 400px; height: 300px;"></div>
<form name="work_form" onsubmit="return numbers()">
<label id="n-work-label">Work</label><input name="work_n_field"/>
<button name="submit" id="submit" value="submit" onclick="numbers()">Submit</button>
</form>
<div id="number-work"></div>

JavaScript

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

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

function numbers(){
        var work_field = document.forms['work_form']['work_n_field'].value;
        var work_div = document.getElementById('number-work');
        var numberschart = work_div.innerHTML = work_field;
        return false;
    };
    
    function drawVisualization() {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(5);
        data.setValue(0, 0, 'Work');
        data.setValue(0, 1, 11);
        data.setValue(1, 0, 'Eat');
        data.setValue(1, 1, 2);
        data.setValue(2, 0, 'Commute');
        data.setValue(2, 1, 2);
      
        // Create and draw the visualization.
        new google.visualization.PieChart(document.getElementById('visualization')).
            draw(data, {
                title:"Mortgage Rates",
                colors: ['#a4b12d', '#818e0a', '#5c6601', '#f0fd79', '#dbe864'],
                animation:{
                    duration:1000,
                    easing: 'out',
                },
                vAxis: {
                    minValue:0, 
                    maxValue:1000
                },
            });
      }    
      google.setOnLoadCallback(drawVisualization);