Google chart: increase margin between x axis labels and x-axis

user_7769344 0
Viewed 3010

I am using angular-google-chart (https://github.com/FERNman/angular-google-charts) an angular wrapper for google-chart to display a column chart. I want to increase the margin between the x-axis labels and the x-axis. In the picture below, the red part indicates where I want to increase the gap enter image description here

Following the documentation, I added this code:

options: {
      ...

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...

The color, font-size, and font-style is working, but can not get the margin gap. Any ideas? Thanks in advance.

angular google-visualization javascript
1 Answers

use chartArea.bottom to increase the space on the x-axis 

options: {
      ...
      chartArea: {
        bottom: 60
      },

      hAxis: {
        textStyle: {
          fontSize: 10,
          fontStyle: "Arial",
          marginTop: '10',
          color: '#808080'
        },
   ...

EDIT

although you can use bottom to increase the height of the x-axis,
the labels still align to the top of the x-axis.

but we can move them down manually, on the chart's 'ready' event,
by increasing the 'y' attribute,
see following working snippet... 

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var dataTable = new google.visualization.DataTable();
  dataTable.addColumn('timeofday', 'Time of Day');
  dataTable.addColumn('number', 'Motivation Level');
  dataTable.addRows([
    [[8, 0, 0], 46],
    [[9, 0, 0], 46],
    [[10, 0, 0], 34],
    [[11, 0, 0], 4],
    [[12, 0, 0], 5],
    [[13, 0, 0], 6],
    [[14, 0, 0], 7],
    [[15, 0, 0], 8],
    [[16, 0, 0], 9],
    [[17, 0, 0], 10],
  ]);

  var options = {
    chartArea: {
      height: '100%',
      width: '100%',
      top: 24,
      left: 60,
      right: 16,
      bottom: 100
    },
    height: '100%',
    width: '100%',

    hAxis: {
      textStyle: {
        fontSize: 10,
        fontStyle: "Arial",
        marginTop: '10',
        color: '#808080'
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    var labels = container.getElementsByTagName('text');
    Array.prototype.forEach.call(labels, function(label) {
      if (label.getAttribute('text-anchor') === 'middle') {
        label.setAttribute('y', parseFloat(label.getAttribute('y')) + 20);
      }
    });
  });
  chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

note: bottom was added during release 43, on Oct. 2, 2015

user_50907710
Related