JSFiddle - React, Tailwind, and code Playground

HTML

<script src="jsapi?fake=.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart","controls"]});
</script>
<div id="dashboard">
	
		<div id="chart1" style='width: 915px; height: 200px;'></div>
	
		<div id="chart2" style='width: 915px; height: 200px;'></div>

		<div id="chart3" style='width: 915px; height: 200px;'></div>
	
		<div id="control" style='width: 915px; height: 50px;'></div>
	</div>

JavaScript

drawVisualization();

var chart1;
var chart2;
var dashboard;

function drawVisualization(){
 drawChart();
var control = new google.visualization.ControlWrapper({
		'controlType' : 'ChartRangeFilter',
		'containerId' : 'control',
		'options' : {
			// Filter by the date axis.
			'filterColumnIndex' : 0,
			'ui' : {
				'chartType' : 'LineChart',
				'chartOptions' : {
					'chartArea' : {
						'width' : '90%'
					},
					'hAxis' : {
						'baselineColor' : 'none',
						 'format': "MMM"
					}
				},
				'chartView' : {
					'columns' : [ 0, 7 ]
				},
			// 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
				'minRangeSize' : 2592000000,
				'maxRangeSize' : 2592000000
			}
		},
		'state' : {
			'range' : {
				'start' : new Date(2011, 1, 1), //data[0].values.min, 
				'end' :  new Date(2014, 12, 1)//data[0].values.max
			}
		}
	});
                             
  chart1 = new google.visualization.ChartWrapper({
		'chartType' : 'LineChart',
		'containerId' : 'chart1',
		'options' : {
			title : 'Chart 1',
			'chartArea' : {
				'height' : '80%',
				'width' : '70%'
			},
			'hAxis' : {
				 title : 'Month',
				'slantedText' : true
				},
			'vAxis' : {
				 title : 'Usage Count'
			},
		    pointSize: 10,
			series: {
			        0: { pointShape: 'square' },
	                1: { pointShape: 'square' },
	                2: { pointShape: 'square' },
	                3: { pointShape: 'square' },
	                4: { pointShape: 'square' },
	                5: { pointShape: 'square' }
	            },
			'legend' : {
				'position' : 'right'
			}
		},
		'view' : {
			'columns' : [ {
				'calc' : function(dataTable, rowIndex) {
					return dataTable.getFormattedValue(rowIndex, 0);
				},
				'type' : 'string'
			}, 2,3,4,5,6,7 ]
		}
	});    
   chart2 = new google.visualization.ChartWrapper({
		'chartType' : 'ColumnChart',
		'containerId' : 'chart2',
		'options' : {
			'isStacked' : true,
			title : 'Chart 2',
			'chartArea' : {
				'height' :...