JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
JavaScript
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Count');
dataTable.addColumn('number', 'As of Today');
dataTable.addRows([
['11-12', 818, 479],
['12-13', 1071, 723],
['13-14', 1063, 740],
['14-15', 1026, 721],
['15-16', 414, 414]
]);
var options = {
width: 500,
height: 300,
chartArea: {
left: 65,
top: 15,
width: 500,
height: "80%"
},
legend: {
position: 'none'
},
tooltip: {
trigger: 'selection',
textStyle: {
fontSize: 14
}
},
series: {
1: {
type: "line",
lineWidth: 3,
color: "#333300",
visibleInLegend: false,
pointSize: 5
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.setAction({
id: 'ddprogram',
text: 'Drilldown By Program',
action: function () {},
visible: function () {
selection = chart.getSelection();
if (selection.length > 0) {
if (selection[0].column == 2) {
return false;
}
}
return true;
},
enabled: function () {
return true;
}
});
chart.draw(dataTable, options);
}