CODEWITHSUNDEEP
javascriptcssgoogle-visualization
Riya
Riya

Reputation: 249

How to increase space between horizontal bars in google stacked bar chart

I am using google charts, which shows the stacked bar chart. I tried groupwidth, but help well increasing the width.

Any help is much appreciated.

function drawChart() {
            // Define the chart to be drawn.
            var data = google.visualization.arrayToDataTable([
               ['name', 'data1', 'data2','data3'],
               ['w1',  40,20,40],
               ['w2',  40,20,40],
               ['w2',  40,20,40],
               ['w2',  40,20,40], ['w2',  40,20,40],
               ['w2',  40,20,40], ['w2',  40,20,40],
               ['w2',  40,20,40],
              
            ]);

            var options = {title: 'Percentage of Risk', isStacked:true,bar: {width:"200%",height:"1200%",gap:"10%"}};  

            // Instantiate and draw the chart.
            var chart = new google.visualization.BarChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
#container {
  width: 550px; height: 1200px; margin: 0 auto
}
<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js"></script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   
   <body>
      <div id = "container">
      </div>
   </body>
</html>

Upvotes: 4

Views: 12927

Answers (2)

Krishna Gope
Krishna Gope

Reputation: 1

If you want to increase width then you should try this, I have also put in my code:

    <script>
        google.charts.load('current', { 'packages': ['corechart'] });
        google.charts.setOnLoadCallback(drawVisualization);
    
        function drawVisualization() {
            // Chart data
            var data = google.visualization.arrayToDataTable([
              ['SALES',  'FINANCIAL YEAR'],
              ['FY-16',100],
              ['FY-17', 230],
              ['FY-18', 520],
              ['FY-19', 940],
              ['FY-20', 1400],
                ['FY-21', 2000]
            ]);
    
            //Chart Custom Options
            var options = {
                title: 'SALES',
                vAxis: { title: 'SALES', ticks: [0, 200, 400, 600, 800, 1000, 1200,1400,1600,1800,2000,2200] },
                hAxis: { title: 'FINANCIAL YEAR' },
                seriesType: 'bars',
                colors: ['#f58a07'],
              
                legend: { position: 'bottom', maxLines: 2, pagingTextStyle: { color: '#374a6f' }, scrollArrows: { activeColor: '#666', inactiveColor: '#ccc' } },
                series: { 1: { pointSize: 2, type: 'line' } },
                animation: {
                    duration: 1000,
                    easing: 'linear',
                    startup: true
                }
            };
    
            var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            chart.draw(data, options);
        }
    
        $(window).resize(function () {
            drawVisualization();
        });
    </script>`enter code here`
    
    
    ----------
     <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <div id="chart_div" class="chart"></div>
                    </div>
                </div>
              
              
            </div>
    
    
    ----------
    <style type="text/css">
        .chart {
            width: 100%;
            min-height: 500px;
        }
         @media(max-width: 667px) {
             .chart {
            width: 350px;
            min-height: 400px;
        }
            }
    </style>

Upvotes: 0

RH7
RH7

Reputation: 223

To increase the width of a group of bars in Google Charts, you have to use the groupWidth configuration.

The syntax for this configuration is: bar: {groupWidth: '100%'} which is placed in the chart options variable.

So for your specific code it would be:

var options = {title: 'Percentage of Risk', 
               isStacked:true,
               bar: {groupWidth: '100%'}};

The width of the group of bars can be specified as pixels, for example 75 or as a percentage such as 50%. For the percentage data type, 100% means no space between the bars.

Official documentation for charts configurations: https://developers.google.com/chart/interactive/docs/gallery/columnchart#configuration-options

Upvotes: 2

Related Questions