JSFiddle - React, Tailwind, and code Playground

by Tehila M

HTML

<script src="https://www.google.com/jsapi" type="text/javascript"></script>
<div id="chart_div" style="min-height: 300px;"></div>

JavaScript

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);
		
		}