JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<div id="chart_div" style="min-height: 300px;"></div>
JavaScript
$(function(){google.load("visualization", "1", {packages:["corechart"], callback:function(){drawChart();}});
//google.setOnLoadCallback(drawChart);
function drawChart() {
console.log("enter draw");
var data = google.visualization.arrayToDataTable([
['Year', 'value', { role: 'style' } ],
['2010', 10, ' color: gray'],
['2010', 200, 'color: #76A7FA'],
['2020', 16, 'opacity: 0.2'],
['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
['2040', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
]);
var view = new google.visualization.DataView(data);
var options = {
title: 'Company Performance',
tooltip: {isHtml: false},
legend: 'none',
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
});