Centering date labels on Google Charts hAxis

Question

If I use date values for the hAxis of a Google Charts column chart, the labels appear below the bar group divider (see pic below). This does not happen if I use strings. Has anyone figured out how to make the date label to appear centered below each bar group?

WhiteHat WhiteHat · Accepted Answer · 2017-10-16T11:28:48

you can provide your own ticks for the hAxis option...

use the dates from the data for each tick / label...

var ticks = [];
for (var i = 0; i < data.getNumberOfRows(); i++) {
  ticks.push(data.getValue(i, 0));
}

then assign in the options...

hAxis: {
  ticks: ticks
},

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'x');
  data.addColumn('number', 'y0');
  data.addColumn('number', 'y1');
  data.addRows([
    [new Date(2017, 07, 08), 200, 210],
    [new Date(2017, 07, 15), 190, 220],
    [new Date(2017, 07, 22), 205, 200]
  ]);

    var ticks = [];
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      ticks.push(data.getValue(i, 0));
    }

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, {
    chartArea: {
      bottom: 24,
      height: '100%',
      left: 48,
      right: 96,
      top: 24,
      width: '100%'
    },
    hAxis: {
      ticks: ticks
    },
    height: '100%',
    title: 'Title',
    width: '100%'
  });
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Centering date labels on Google Charts hAxis

1 Answers