Google chart Axis title position - Javascript Google Chart

Javascript examples for Google Chart:Axis

  1. HOME
  2. Javascript
  3. Google Chart
  4. Axis

Description

Google chart Axis title position

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>vAxis title issue</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#barchart_material g text {//w  w w.j av  a 2  s  .  c  om
   font-size: 12px !important;
}


      </style> 
   </head> 
   <body> 
      <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script> 
      <div id="barchart_material"></div> 
      <script type="text/javascript">
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['', 'Percentage'],
      ['Always', 40],
      ['Usually', 30],
      ['Rarely', 10],
      ['Never', 20]
    ]);
    var options = {
      chart: {
        title: 'Company Performance'
      },
      legend: { position: "none" },
      vAxis: {
       title: 'Percentage',
      titleTextStyle: {
         fontSize: '18',
      },
        viewWindowMode:'explicit',
        viewWindow: {
          max:100,
          min:0
        }
    },
      bars: 'vertical', // Required for Material Bar Charts.
        width: 400,
        height: 400
    };
    var chart = new google.charts.Bar(document.getElementById('barchart_material'));
    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

      </script>  
   </body>
</html>

Related Tutorials