JSFiddle - React, Tailwind, and code Playground

by heennkkee

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<input type="text" value="Pick a color" id="newColor"><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) {
    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 = {
        chart: {
            title: 'Company Performance',
            subtitle: 'Sales, Expenses, and Profit: May-August'
        },
        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('redrawButton').value = "Redraw chart"
}