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', 'Month');
data.addColumn('number', 'Value');
data.addRows([
['January', 5],
['February', 8],
['March', 2],
['April', 2],
['May', 3],
['June', 4],
['July', 5],
['August', 5],
['September', 7],
['October', 6],
['November', 8],
['December', 9]
]);
var view = new google.visualization.DataView(data);
view.setColumns([{
type: 'number',
label: data.getColumnLabel(0),
calc: function (dt, row) {
return {v: row, f: data.getValue(row, 0)};
}
}, 1]);
var hAxisLabels = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
hAxisLabels.push({v: i, f: data.getValue(i, 0)});
}
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
hAxis: {
ticks: hAxisLabels
},
trendlines: {
0: {
type: 'linear',
color: 'red',
labelInLegend: 'Trend',
visibleInLegend: true
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});