title: BarChart with Stacked & Group
body: <p>I have prepared google 'bar' chart as below its working properly.how can i change direction of bar form vertical to horizontal ?</p>
  
  <p>I tried to change direction of chart Using  <code>vAxis: {direction:-1}</code> but not working.</p>
  
  <p>I tried to get solution from google chart sites but i cant found any other solution for horizontal  bar chart with Stacked &amp; Group. Is there any other way to change direction of Google 'bar' Chart ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;title&gt;Web Page Design&lt;/title&gt;
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
          google.charts.load('current', { 'packages': ['bar'] });
          google.charts.setOnLoadCallback(drawChart);
  
          function drawChart() {
              var data = google.visualization.arrayToDataTable([
  
                  ['Year', 'Sales', 'Expenses', 'Profit'],
                  ['2014', 1000, 400, 200],
                  ['2015', 1170, 460, 250],
                  ['2016', 660, 1120, 300],
                  ['2017', 1030, 540, 350],
                  ['2017', 1030, 540, 350]
              ]);
  
               var options = { 
                   
                   
                  isStacked: true,pointSize: 15, 
                  vAxis: {
                    viewWindow: {
                      
                      min: 0,
                      
                    }
                  },
                  
                  legend: {
                     position:'bottom',
                      textStyle: {
                          bold: false,
                          fontSize: 12,
                   }
  
                  },
                  is3D: true,
  
                  
                  
                 
                   vAxes: {
                      
                      0:{
                         
                      title: 'value in lac' 
                          },
                    1: {
                        
                      gridlines: {
                        color: 'transparent'
                      },
                      textStyle: {
                        color: 'transparent'
                      }
                    },
  
                   2: {
                       
                      gridlines: {
                        color: 'transparent'
                      },
                      textStyle: {
                        color: 'transparent'
                      }
                    },
                  
  
                  },
                  
                  
  
  
                  series: {
                    0: {
                      targetAxisIndex: 0,
                      color:'#2A6DDA'
                    },
                    1: {
                      targetAxisIndex: 1,
                      color:'#FF5733'
                    },
                    2: {
                      targetAxisIndex: 1,
                      color:'#FFC300'
                    },
                    3: {
                      targetAxisIndex: 1,
                      color:'#D3A4FA'
                    },
   
                  },
                };
                  
  
                  var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
  
                  chart.draw(data, google.charts.Bar.convertOptions(options));
                      }
                  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="columnchart_material" runat="server" style="width: 600px; height: 500px;"&gt;
  
  
              
          &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>