Muhammad Waqas Sharif Muhammad Waqas Sharif - 3 months ago 29
HTML Question

Google Bar Chart Moving x-axis labels to Top

I am using Google Bar Chart and i want to move the x-axis label to the top. I have written the code but its not happening. Please check the fiddle and screen shot.
Any suggestions?

Thanks,

`https://jsfiddle.net/n5paq0r9/`


Code Screenshot

Answer

Top-X charts are available only for Material charts

Material Bar Chart
google.charts.Bar

vs. Core Bar Chart
google.visualization.BarChart

see following working snippet...

google.charts.load('current', {packages: ['bar']});
google.charts.setOnLoadCallback(drawBasic);

function drawBasic() {

var data = google.visualization.arrayToDataTable([
         ['App Name', 'Density', { role: 'style' }, { role: 'annotation' } ],
         ['My Test App Name Appears Here', 6.94, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 10.49, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 19.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 24, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 5.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 2.30, 'blue', 'My Test App Name Appears Here' ],
         ['My Test App Name Appears Here', 21.45, 'blue', 'My Test App Name Appears Here' ]
      ]);

var options = { 
          chartArea: {width: '90%'},
          height: 500,
          legend: { position: 'none' },
          vAxis:{textStyle:{color: '#005500',fontSize: '12', paddingRight: '100',marginRight: '100'}},
          hAxis:{textStyle:{color: '#005500',fontSize: '11', paddingRight: '100',marginRight: '100'}},
          bars: 'horizontal',
          axes: {             
            x: { 
              0: { side: 'top'} 
            }                     
          }     
        };

      var chart = new google.charts.Bar(document.getElementById('chart_div'));

      chart.draw(data, google.charts.Bar.convertOptions(options));
    }
    
    
$(window).resize(function(){
  drawBasic();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Comments