How to increase bar width in google bar chart?

Question

I understand bar: { groupWidth: '100%'} increase bar width to max.

But I need to show legend on right side, so i code chartArea: { right:'60%'} to create more space to show legend, it is causing no more space for bar width. Screenshot at below:

enter image description here

Is there any solution to make bar: { groupWidth: '300%'} or make bar groupWidth regardless chartArea: { right:'60%'} ?

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['Plan', 'SEED FUND = USD50,000', 'LOAN FUND = USD50,000', 'PROFIT = USD3000'], ['MCF', 50000, 50000, 3000], ]); var options = { title: { position: 'none'}, vAxis: {title: 'MCF Equity'}, hAxis: {title: 'USD'}, seriesType: 'bars', series: {5: {type: 'line'}}, legend: {alignment: "center"}, chartArea: {top:10, bottom:80, left:'20%', right:'60%', 'width': '1000%' }, isStacked: true, bar: { groupWidth: '200%'}, hAxis: { viewWindow: { min: 0, max: 6 } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" class="chart"></div>

Answer 1

Just play around and got the solution accidentally. Just change max: 6 to max: 3

Demo:

 google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data = google.visualization.arrayToDataTable([ ['Plan', 'SEED FUND = USD50,000', 'LOAN FUND = USD50,000', 'PROFIT = USD3000'], ['MCF', 50000, 50000, 3000], ]); var options = { title: { position: 'none'}, vAxis: {title: 'MCF Equity'}, hAxis: {title: 'USD'}, seriesType: 'bars', series: {5: {type: 'line'}}, legend: {alignment: "center"}, chartArea: {top:10, bottom:80, left:'20%', right:'60%', 'width': '1000%' }, isStacked: true, bar: { groupWidth: '200%'}, hAxis: { viewWindow: { min: 0, max: 3 } } }; var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div id="chart_div" class="chart"></div>