Google chart vAxis title being cut off and needs to move closer to axis

Question

I'm trying to use Google charts to display the results of a survey. All seems fine, apart from the title of the vAxis is being cut off slightly and I can't work out how to move it closer to the axis.

This is the code:

  google.load("visualization", "1.0", {packages:["bar"]});
  google.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Question title goes here', 'Percentage Score'],
      ['Always', 40],
      ['Usually', 30],
      ['Rarely', 10],
      ['Never', 20]
    ]);

    var options = {
      chart: {
        title: 'Section Title',
        subtitle: 'Section subtitle',
      },
      legend: { position: "none" },
      vAxis: {
        title: 'Percentage',
        viewWindowMode:'explicit',
        viewWindow: {
          max:100,
          min:0
        }
    },
      bars: 'vertical', // Required for Material Bar Charts.
        width: 600,
        height: 500
    };

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


    chart.draw(data, google.charts.Bar.convertOptions(options));
  };

I have a fiddle here: https://jsfiddle.net/SBComms/pa4yLcb3/

Answer 1

I managed to find a real fiddle to the problem. I have updated the chart script so that the vAxis fontSize is 18:

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));
};

I have then added a CSS setting to force the font size back to normal:

#barchart_material g text {
    font-size: 12px !important;
}

I have updated the fiddle here: https://jsfiddle.net/SBComms/pa4yLcb3/1/

Answer 2

With a Core Chart, you can adjust the size of the chartArea to allow room for the title.

However, this doesn't appear to work for a Material Chart.

Also, I would recommend loading with loader.js vs. the older library jsapi.

See following example...

google.charts.load('current', {
  callback: drawChart,
  packages: ['bar', 'corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Question title goes here', 'Percentage Score'],
    ['Always', 40],
    ['Usually', 30],
    ['Rarely', 10],
    ['Never', 20]
  ]);

  var options = {
    chart: {
      title: 'Section Title',
      subtitle: 'Section subtitle',
    },
    chartArea: {
      backgroundColor: 'cyan',
      height: 400,
      left: 60,
      top: 20,
      width: 500
    },
    legend: {
      position: "none"
    },
    vAxis: {
      title: 'Percentage',
      viewWindowMode:'explicit',
      viewWindow: {
        max:100,
        min:0
      }
    },
    bars: 'vertical',
    width: 600,
    height: 500
  };

  var chart = new google.charts.Bar(document.getElementById('barchart_material'));
  chart.draw(data, google.charts.Bar.convertOptions(options));

  var chart2 = new google.visualization.ColumnChart(document.getElementById('barchart_core'));
  chart2.draw(data, options);
};

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>========MATERIAL========</div>
<div id="barchart_material"></div>
<div>==========CORE==========</div>
<div id="barchart_core"></div>