JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div"></div>
JavaScript
var chart, data;
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart()
{
// Create the data table.
data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addColumn('number', 'pieces');
data.addColumn('number', 'ratio');
data.addColumn('number', 'ratio2');
data.addRows([
['Mushrooms', 300, 200, 50, 1],
['Onions', 100, 244, 4, 3],
['Olives', 100, 400, 56, 10]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
var val = dt.getValue(row, 1);
return (val > dt.getValue(row, 2)) ? val : null;
}
}, 2, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
var val = dt.getValue(row, 1);
return (val <= dt.getValue(row, 2)) ? val : null;
}
}, 3, 4]);
// Set chart options
options = {
chartType:"ComboChart",
containerId:"visualization",
stackSeries: true,
isStacked : true,
seriesDefaults: {
rendererOptions: {
barPadding: 0,
barMargin: 10
},
pointLabels: {
show: true,
stackedValue: true
}
},
grid: {
background: '#272424',
drawGridlines: false
},
seriesType: "bars",
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
},
2: {
targetAxisIndex: 0,
visibleInLegend: false,
color: '#3366cc' // matches series 0
},
3: {
...