JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<input type="button" id="ChangeRange" value="click me" />
<div id="dash">
    <div id="chart_div"></div>
    <div id="control"></div>
</div>

JavaScript

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

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'X');
    data.addColumn('number', 'Y');
    data.addColumn('number', 'Z');
    data.addRows([
        [0, 1, 4],
        [1, 4, 5],
        [2, 3, 2],
        [3, 8, 7],
        [4, 6, 1],
        [5, 2, 7],
        [6, 9, 9],
        [7, 1, 4],
        [8, 5, 6],
        [9, 7, 3],
    ]);
    
    var dash = new google.visualization.Dashboard(document.getElementById('dash'));
    
    var control = new google.visualization.ControlWrapper({
        controlType: 'ChartRangeFilter',
        containerId: 'control',
        options: {
            filterColumnIndex: 0,
            ui: {
                chartView: {columns:[0,1]},
                chartOptions: {
                    height: 50,
                    width: 700,
                    chartArea: {
                        width: '80%'
                    }
                }
            }
        }
    });
    
    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'chart_div',
        options: {
            height: 450,
            width: 700,
            chartArea: {
                width: '80%'
            }
        }
    });
    
    dash.bind([control], [chart]);
    
    google.visualization.events.addListener(dash, 'ready', function () {
        document.getElementById('ChangeRange').onclick = function () {
            control.setState({ui:{chartView:{columns:[0,1,2]}}});
            control.setOption({ui:{chartView:{columns:[0,1,2]}}});
            control.draw();
        }
    });
    
    dash.draw(data);
}