JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>
<div id="cost_chart_div"></div>
JavaScript
google.setOnLoadCallback(costChart);
function costChart() {
var energyType = 'Monthly Cost';
var energySavings = [1,2,3,4,5,6,7,8,9,10,11,12]; //=this.costSavings
var month = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nov','Dec'];
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Month');
data.addColumn('number', energyType + ' Saved');
data.addRows([
[month[0], energySavings[0]],
[month[1], energySavings[1]],
[month[2], energySavings[2]],
[month[3], energySavings[3]],
[month[4], energySavings[4]],
[month[5], energySavings[5]],
[month[6], energySavings[6]],
[month[7], energySavings[7]],
[month[8], energySavings[8]],
[month[9], energySavings[9]],
[month[10], energySavings[10]],
[month[11], energySavings[11]]
]);
// Set chart options
var options = {'title': 'Cost Savings',
'width':400,
'height':300,
'hAxis':{format: 'currency'}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.BarChart(document.getElementById('cost_chart_div'));
chart.draw(data, options);
}