JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="chart" style="height:600px;"></div>
JavaScript
google.load("visualization", "1.1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
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 view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, {
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}]);
// view.setColumns([0,1,2]);
var options = {};
var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
chart.draw(view, options);
google.visualization.events.addListener(chart, 'select', GetChartOnClickData);
function GetChartOnClickData() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var col = chart.getSelection()[0]['column'];
var colname = view.getColumnLabel(col);
alert(colname);
}
}
}