JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div" style="width: 300px; height: 500px;"></div>
<div id="table_div" style="width: 300px; height: 500px;"></div>
JavaScript
google.load("visualization", "1", {
packages: ["corechart", "table"]
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[8, 12],
[4, 5.5],
[11, 14],
[4, 5],
[3, 3.5],
[6.5, 7],
[6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {
title: 'Age',
minValue: 0,
maxValue: 15
},
vAxis: {
title: 'Weight',
minValue: 0,
maxValue: 15
},
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
var table = new google.visualization.Table(document.getElementById('table_div'));
chart.draw(data, options);
table.draw(data);
google.visualization.events.addListener(chart, 'select', function() {
table.setSelection([{row: chart.getSelection()[0].row}]);
});
google.visualization.events.addListener(table, 'select', function() {
chart.setSelection(table.getSelection());
});
}
google.setOnLoadCallback(drawChart);