Centering date labels on Google Charts hAxis - charts

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?

Answer 1

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>