JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
JavaScript
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addRows([
['Brazil', 207],
['China', 10382],
['France', 402889],
['Germany', 6944771]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'GeoChart',
containerId: 'chart_div',
dataTable: data,
options: {
width: 600,
legend: 'none' // hide the legend since the values will not be accurate
},
view: {
columns: [0, {
// log scale the data
type: 'number',
label: 'Value',
calc: function (dt, row) {
// find the base-10 log of the value
var log = Math.log(dt.getValue(row, 1)) / Math.log(10);
return {v: log, f: dt.getFormattedValue(row, 1)};
}
}]
}
});
chart.draw();
}
google.load('visualization', '1', {packages:['controls'], callback: drawChart});