JSFiddle - React, Tailwind, and code Playground

by Wurthmann

HTML

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div id="top_x_div" style="width: 800px; height: 600px;"></div>
  </body>
</html>

JavaScript

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {
	var data = new google.visualization.arrayToDataTable([
		['Nome', 'Valor'],
    ["Qatar", 683900],
		["Luxembourg", 519360],
		["Iceland", 476710],
		["Bahrain", 442990],
		["United States", 415570]
	]);

	var options = {
		width: 800,
		legend: { position: 'none' },
		chart: {
			title: 'Top 5',
			subtitle: 'Uso de energia por país'
		},
		axes: {
			x: {
				0: { side: 'top' } // Top x-axis.
			}
		},
		bar: { groupWidth: "90%" }
	};

	var chart = new google.charts.Bar(document.getElementById('top_x_div'));
	// Convert the Classic options to Material options.
	chart.draw(data, google.charts.Bar.convertOptions(options));
};