JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<input type="text" value="ChartArea color" id="newColor">
    <input type="text" value="Background color" id="newBackground">
        <input type="button" value="Draw" onclick="redrawChart()" id="redrawButton">
<div id="columnchart_material" style="height:600px;"></div>

JavaScript

google.load("visualization", "1.1", {packages: ["bar"]});

function drawChart(color,color2) {
    var data = google.visualization.arrayToDataTable([
        ['Month', 'Sales', 'Expenses'],
        ['January', 200, 150],
        ['February', 1170, 460],
        ['March', 660, 1120],
        ['April', 1030, 540],
        ['May', 1030, 540],
        ['June', 1030, 540]
    ]);

    var options = {
        backgroundColor: color2,
 
        chartArea: {
            backgroundColor: color,
        }

    };

    var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

    chart.draw(data, google.charts.Bar.convertOptions(options));
}

function redrawChart(){
     drawChart(document.getElementById('newColor').value, document.getElementById('newBackground').value );
     document.getElementById('redrawButton').value = "Redraw chart"
}