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>