JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="dual_y_div" style="width: 900px; height: 500px;"></div>
<div id="dual_y_div1" style="width: 900px; height: 500px;"></div>
JavaScript
startChart();
function startChart() {
var data = new google.visualization.arrayToDataTable([
['Galaxy', 'Distance', 'Brightness'],
['Canis Major Dwarf', 8000, 23.3],
['Sagittarius Dwarf', 24000, 4.5],
['Ursa Major II Dwarf', 30000, 14.3],
['Lg. Magellanic Cloud', 50000, 0.9],
['Bootes I', 60000, 13.1]
]);
var options = {
width: 900,
title: 'Nearby galaxies',
/*subtitle: 'distance on the left, brightness on the right',
series: {
0: {
axis: 'distance'
}, // Bind series 0 to an axis named 'distance'.
1: {
axis: 'brightness'
} // Bind series 1 to an axis named 'brightness'.
},
axes: {
y: {
distance: {
label: 'parsecs'
}, // Left y-axis.
brightness: {
side: 'right',
label: 'apparent magnitude'
} // Right y-axis.
}
},*/
vAxes: {
0: {
title: 'parsecs',
},
1: {
title: 'apparent magnitude',
},
},
series: {
0:{
targetAxisIndex:0,
},
1:{
targetAxisIndex:1,
},
},
};
var chart = new google.visualization.ColumnChart(document.getElementById('dual_y_div'));
chart.draw(data, options);
var chart1 = new google.visualization.ColumnChart(document.getElementById('dual_y_div1'));
chart1.draw(data, options);
}