JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="visualization"></div>
JavaScript
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {
'packages': ['corechart']
});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
var array = [
['Categoria', 'Lead', 'Proposta', 'Oportunidade',{ role: 'style' }, { role: 'annotation' }],
['Luis B', 1000, 7000, 10000, 'opacity: 0.2', 'total'],
['Goncalo', 2000, 3000, 12000,'opacity: 0.2', 'total'],
['Jaime', 2000, 5000, 12000,'opacity: 0.2', 'total'],
['Raquel', 6000, 2000, 10000,'opacity: 0.2', 'total'],
['Luis G', 10000, 4000, 9000,'opacity: 0.2', 'total']
];
function drawChart() {
// Create the data table.
var data = new google.visualization.arrayToDataTable(array);
// Set chart options
var options = {title:"Pontos por Jogador",
width:400, height:300,
hAxis: {
textStyle: {'color': 'white'}},
animation:{
duration: 3000,
easing: 'out'}
,isStacked: true
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data, options);
}