JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?.js"></script>
<div id='chart_div'></div>
JavaScript
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows([
['Foo', 3],
['Bar', 7],
['Cad', 9]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
// return 0 for all values in this column
calc: function () {return 0;}
}]);
var options = {
animation: {
duration: 1000
},
height: 400,
width: 600,
vAxis: {
minValue: 0,
maxValue: 10
}
};
var chart = new google.visualization.ColumnChart(document.querySelector('#chart_div'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
// redraw the chart with the real data, to animate
chart.draw(data, options);
});
// draw the chart with the zeroed-out data
chart.draw(view, options);
}
google.load("visualization", "1", {packages:["corechart"], callback: drawChart});